It is easy to author a jQuery plugin. I am using jQuery v1.3.2 in this tutorial and of course, you are free to use any other versions instead. For instance, the latest version, v1.4.2.

Note: You are highly encouraged to use recent versions for the sake of stability and performance, as well as new features, etc. Personally, I recommend to use at least v1.3.2 and above.

Step 1: Include the jQuery core library file
First and foremost, you are required to grab a jQuery core library and include it, typically within <header> tag. If you don’t know where to go, you can get a copy of jQuery core library from its official website. Here is how we include the file:

<script type="text/javascript" src="jquery.js"></script>

I have basically renamed the file as ‘jquery.js’ which resides in the same web folder with my web page, which is supposed to be used in this tutorial.

Step 2: Scoping and Avoiding Conflict
Once we included the core library, we can start writing our methods and bundle it as plugin. As I have already mentioned in my previous post, it’s always a good practice to scope the jQuery’s alias object, ‘$’ and avoid any conflict with other libraries. So that, we can use the ‘$’ object when authoring our own methods. To do so, write an anonymous function as follows:

(function($){
 //put everything inside this function...
})(jQuery);

Step 3: Define a method
Next, we are going to create a method that will be attached to jQuery’s fn object so that we can use our own method together with jQuery core methods, so-called ‘chaining’. Say, we defined a method named as randColour and attached to $.fn object:

(function($){
   $.fn.randColour = function(){
      return this.each(function(){
       //our stuff are putting inside 'each' function...
     });
   };
})(jQuery);

To allow us to chain with jQuery’s core methods, we need to put our stuff in jQuery’s ‘each’ function and return it so that it can be tied with others. Keep in mind that, the ‘this‘ reserved word here refers to jQuery object!

Step 4: Put things together
Once we are done with the plugin ’skeleton’, we can then really start writing our stuff and putting it inside ‘this.each()’ function. This tutorial, we are going to define two functions: ‘returnColour()‘ and ‘applyColour(obj)‘.

i) returnColour() – This function will return a randomized colour in RGB format.
ii) applyColour(obj) – As its name applies, we are passing HTML element object to this function and apply the randomized colour to selected text.

So, the complete code is as follows:

(function($){
   $.fn.randColour = function(){
     return this.each(function(){
 
       //init applyColour
       applyColour(this);
 
        //apply colour to selected text
        function applyColour(obj){
         var rColour = returnColour();         
          $(obj).css({"color": rColour});
        }
 
        //return a randomized colour
        function returnColour(){
           var maxRgb = 256;
		var rgbVal = new Array();
		var rgbTxt = "rgb(";
		//iterate to get rgb value
		for( var i = 0; i < 3; i++ ){
		 rgbVal[i] = Math.floor( Math.random() * maxRgb );
		 if( i < 2 ){
		  rgbTxt += rgbVal[i] + ",";
		 }else{
		   rgbTxt +=  rgbVal[i] + ")";
		 }
		}
	     return rgbTxt;
       }
     });
   };
 })(jQuery);

Perhaps, you have noticed that there was an additional line of code in ‘this.each()’ function:

  applyColour(this);

We basically use this line of code to invoke the function and passing an object to it once ‘randColour’ is called. Please be mindful, the this word here is now referring to the current object of HTML element, and NOT jQuery object. To make it clearer, it can be read as ‘apply the colour to this selected HTML element’.

Step 5: Calling Our Defined Method
OK, at this stage, we can call our own method through jQuery ready handler whenever we want! For example:

JavaScript:

 $(function(){
   $("#hello").randColour();
 })

HTML

<h1 id="hello">Hello World!</h1>
(To change text colour, please click browser's 'Refresh/Reload' button.)

NOTE: Once you are done with the code, you can save it as separate JS file and name it as, ‘jquery.something.js’. For instance, you may name it as ‘jquery.randcolour.js’ so that it can be included in any web page for reuse purpose.

Related posts:

1. Few Things to Note When Authoring jQuery Plugin
2. Create Fancy Loading Effect with jQuery
3. jQuery: Implement Ajax with $.ajax()
4. Facebox(Facebook-Style): Load Your Page into Lightbox on the Fly!

 var myObject = {
    property: "Foo: Bar",
	oFnc: function(){
	 document.writeln("Hello World!");	 
   }	 
 };

As you can see, myObject is now playing as an object. To check on it, just run this line of code:

alert("myObject is: " + typeof myObject);

And, it will tell you myObject is an ‘object’, as follows:

Object

So, to access its property/function, we can basically call it as simple as this:

To access property and display it in alert prompt:

alert(myObject.property);

To access function, we can do it like this:

myObject.oFnc();

OK now, I wanted to add another group of Object Literal, say put it in oFnc function and then return it. So the complete code will look something like this:

  var myObject = {
    property: "Foo: Bar",
	oFnc: function(){
	 document.writeln("Hello World!");
	 //additional object literal
	  var nestOL = {
		nProperty: "Bar: Foo",
		nFnc: function(){
		  return alert("Hello World! in alert prompt!");	
	   }		 
	 };
 
	 return nestOL;
   }	 
 };

Since I’m returning an object-literal from the oFnc function, it causes oFnc to act as function, but aslo an object when it’s called. To check it’s function and also, an object when it’s invoked, just run code as follows:

alert("oFnc is: " + typeof myObject.oFnc);
alert("oFnc() is: " + typeof myObject.oFnc());

And you will get the respective results shown in these following screen-shots:

oFnc is a function:

oFnc is a function

oFnc() is an object when called:

oFnc() is an object

Well, everything is so clear with what we have. Now, we can easily to access the properties/functions on the fly. From the example above, we basically have a nested Object Literal (so-called) and also, defined a ‘function’ object which is oFnc. For instance, I wanted to display ‘Hello Word!’ in HTML element and followed by ‘Hello World! in alert prompt!’ in an alert prompt, here is what I do:

myObject.oFnc().nFnc();

Once the line of code is run, it yields the result as follows:

Result

The advantage:
We can make a function to act as function, yet an object as well whenever it’s called. Besides of this, we can also add the private properties/functions into the defined function, too. This will produce and mimic a ‘chaining’ method. In addition, we are doing several tasks at once by calling a single line of code. Enjoy!

No related posts.

If you have been involved in Web Development for some time, I believe you have heard about Firebug. In a nutshell, Firebug is an extension of Mozilla Firefox web browser to allow developers to monitor, edit and debug JavaScript, CSS, HTML in their web applications. There are also some add-ons of Firefox to integrate with Firebug, such as YSlow and Hammerhead etc. So, what I used to do with Firebug? Well, I am going to list out some of the features I personally like the most in Firebug.

Before getting started, here is the info of Firefox and Firebug on my machine:

Firebug: Version 1.5.0
Firefox's user-agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

1) Debugging JavaScript
If there was an error occurred in JavaScript, I will always use Firebug to check with my code. To check JS code, we have to make sure ‘Show JavaScript Errors’ has been checked in ‘Console’ tab. However, it should be checked by default once we got Firebug installed. Let’s consider the simple JS code as follows, which will generate an error after it’s run:

 function displayHello(){
   var message = "Hello! Nice to meet you.";
   alert(message);
 
 displayHello();

Apparently, there was missing a closing braces of the ‘displayHello’ function and causing an error. If I’m running the code snippet by turning on Firebug, I should be able to see the following message under ‘Console’ tab, as shown in this screen-shot:

JS error

2) Dealing with Ajax
Ajax has been widely used and quite common in Web 2.0. Sometimes, we will have to check both front-end and back-end and making sure there is no error in our code. Here is an example of Ajax works together with PHP. Say, I’m making Ajax call which is working perfectly, however, I encountered a problem and failed to retrieve result via the Ajax call. I can do a quick check on the result that sent back to the front-end in such situation, through Firebug debugger. For instance, I have made a jQuery’s get Ajax call and the function is working fine without any error, as follows:

Ajax call (with no error)

 function displayHelloAjax(){
   $.get("hello.php", {action: "display"}, 
    function( result ) {
     if( result ){
      alert(result);
	}
 });
}
 
$(function(){
  displayHelloAjax();
});

Unfortunately, I have gotten an error when ‘hello.php’ is called via Ajax and causing me unable to get the expected result in alert prompt. So, what should I do? Definitely, I will have to check on the back-end code. For example, below is the simple PHP code I’m running on, but with error:

PHP (with error)

<?php
$action = $_GET["action"];
if( isset($action) && $action == "display" ){
 echo "Hello! Nice to meet you."
}
?>

Once I executed the code with Firebug is turned on, I will see the error message under the ‘Console’ tab:

PHP error

Note: In this case, however, you still be able to see the same error message in alert prompt. This example emphasizes debugging via Firebug.

3) HTML Layout
If text editor or IDE we use does not support design view, we may take the advantage of Firebug to trace the specific HTML elements from our web page, too.

HTML Layout

4) Web Performance
If you are fussy with your works, and particular with the speed and network of your web page, we can use Firebug to check with the speed of page loading. Firebug has come out with ‘Net’ option to enable us to see the total of time (in milliseconds) to load a file when it is invoked. So, most of time, I will use this option to check the speed of my site and evaluate the time is taken for loading a file such as image, JS file etc. And so, appropriate adjustment might be taken if it is taking too much time to load that particular file. Here is an example of the screen-shot:

Once this option is turned on, I will be able to see all files that is being loaded and total of time that was taken for downloading it. If I only want to check on, say JavaScript files, I can selectively choose ‘JS’ and then I’m able to get the result for JS files only. Likewise, if I wanted to check the response from the server, I can just simply expand the URL and view it under ‘Response’ tab, as well.

So, what else?
The features I have mentioned above are just some good parts of Firebug that I frequently use in my projects. You are allowed to do more things by using Firebug, such as setting breakpoint, editing HTML/CSS straight from Firebug, inspecting DOM elements and so on. There are lots of debugger can be found online, Firebug is only one of the best and highly recommended. Which debugger tool should be used really depends on individual preference. If you want to know more, just check out on Firebug’s official site.

Related posts:

1. Facebox(Facebook-Style): Load Your Page into Lightbox on the Fly!
2. Create Fancy Loading Effect with jQuery
3. JavaScript: Dynamically Styling Form Elements in IE6
4. Close Window without the Prompt Message in IE 7, How?
5. jQuery: Implement Ajax with $.ajax()

For example, I wanted to apply the following CSS to all text-fields in my web page, here is how it would look like:

CSS

input[type='text']{
 border:2px solid #ccccff;
}

HTML Form

<label>Form 1</label>
<form name="form1">
<input type="text" name="f1-input1" size="30"/>
<input type="text" name="f1-input2" size="30"/>
</form>
 
<label>Form 2</label>
<form name="form2">
<input type="text" name="f2-input1" size="30"/>
<input type="text" name="f2-input2" size="30"/>
<input type="text" name="f2-input3" size="30"/>
</form>

Well, as what you have expected, it will apply to all text-fields and set the ‘border’ attributes to respective text-field elements. It basically works fine in Firefox, Chrome, Safari, Opera and IE7/8. Unfortunately, it is NOT working in IE6 and below.

The Trick Is?
So, what should we do for dealing with that issue? Perhaps, the simplest method is to use CSS class method. Whereas, change the CSS to something as follows:

CSS

 .iTextStyle {
 border:2px solid #ccccff;
}

and, add the ‘class’ attribute in every single input text-field like so:

HTML

<input type="text" name="f1-input1" size="30" class="iTextStyle"/>
<!-- more text-fields below -->

OK! Everything seems working fine now. Nevertheless, it will be annoying to add ‘class’ attribute accordingly if you are having number of forms in your web page. So, this method is only applicable if you are having a form with few elements.

The better way is, we can dynamically style all text-field elements by having a little help with JavaScript. Here is an example of JS code I have written:

JavaScript

//count number of form
 var numForm = document.forms.length;
 //loop over all forms and form[] elements
  for( var i = 0; i < numForm; i++ ){
    //count number of form's elements
	var numInput = document.forms[i].elements.length;
	for( var j = 0; j < numInput; j++ ){
	  //get text element only from current form
	   var typeElement = document.forms[i].elements[j].type;
	  if( typeElement === "text" ){
	    //apply class to particular element
		document.forms[i].elements[j].className = "iTextStyle";
	  }
	}   
  }

Basically, the code snippet of JS will count the number of form in your web page and, particularly iterate over elements from the form, as well as the type of each element is being checked. As long as the text-field element is encountered, we then apply the related class name to the matched element.

The advantage here is, you do not need to care the number of form/element in your web page. Yet, it will apply the CSS to all matched elements, even in IE6 and below.

NOTE:
1) You can create a JS function, say ’styleTextElement’ and put the code in that function; call it whenever you want.
2) The code should be executed AFTER all forms in your web page. Otherwise, it will not work.
3) You may check on the version of IE and only render the code when IE6 and prior versions are used for browsing the web page. For more recent versions, we can simply use CSS selector method instead.

Related posts:

1. Implement Form Serialization via JavaScript
2. Get Rid of Using eval() to Dynamically Update Form Field
3. Create a Simple LightBox
4. Watch out when deleting all Rows from a Table via JavaScript
5. Nifty Corners

Well, after I have got this plugin done, from what I have experienced, here are few important things I personally felt that every developer should pay attention when authoring a jQuery plugin.

1) Passing jQuery object to Anonymous function
First and foremost, before you start putting any code of yours, it’s always a good idea to pass the jQuery object to an anonymous function, as suggested in jQuery’s Plugins/Authoring page (and also mentioned in other developers’ blogs). If you have been coding jQuery before, I believe most of the time you will use jQuery’s alias object- “$” the dollar sign for calling a method/function. Why to do so? something you need to keep in mind is, there are thousands of libraries are available and can be found online and they maybe using the same “$” object, the well-known library is Prototype. So to avoid any object conflicts, you should always wrap jQuery object and pass it to an anonymous function, so that you are allowed to use the “$” alias without worrying conflict with other libraries, especially when a developer he or she is using more than one JavaScript library. Here how it does look like:

(function($){
 //your code is going from here...
}) (jQuery);

As you may have already known, this anonymous function will be invoked immediately once the page is loaded, by passing ‘jQuery’ object and assigned to a ‘$’ dollar sign, then only proceed to your own code. By using this trick, you can always use $ object within the function without worrying the conflicts.

2) Methods or Functions?
If you have read the jQuery’s Plugins/Authoring page, you may have already known that any methods should be attached to jQuery.fn object; and all functions to the jQuery object. Well, what all these mean to us? Most of the articles or tutorials have done a good job and also shown the way of authoring a jQuery plugin, but most of the time, it seldom mentions when and why we should use that in our own plugins and I do believe, some of the developers are confused with these when trying to get started with jQuery plugin development.

When to use method and attach it to jQuery.fn or $.fn?
From my understanding, you will only attach a method to jQuery.fn when the same method is being used more than one time, and more importantly, it’s attached to jQuery.fn when you wanted to use it for ‘chaining’ purpose. In other words, you should always return it (jQuery object) once the process is done and to allow it’s used together with the jQuery’s methods from the core library. For instance, you wanted to add css after your method was called. All we do is put it as chaining pattern:

  $.fn.myOwnMethod = function(){
  return this.each(function(){
   // 'this' in each() function is always referred to current HTML's element object...
    $(this).html("this is my text..");
  });  
 };
 
 $(function(){
   $("div#myId").myOwnMethod().css('background-color', '#ccccff');
 });

From the snippet above, you’re applying your own method (myOwnMethod) to an HTML’s div element with its id, ‘myId’ by inserting text and then chained it with jQuery’s css() method and set the div’s background colour as ‘#ccccff’. The core concept behind is, or something you must always keep in mind is the ‘this’ object:

i) ‘this’ tied with each() method, this.each():
– The word, ‘this’ here is the jQuery’s object, as in the ‘$’ dollar sign object, which is being used to call the each() method from the core library.
ii) ‘this’ inside each() method:
- The ‘this’ object here is always referred to the current HTML’s element object. In this example is, the div element with ‘myId’.

With this solid concept in mind, you are able to create any methods of yours that will be used for chaining with current jQuery’s core methods and utilities.

How about the ‘functions’?
Personally, I feel that creating functions is much more easier than methods, as what I have explained, previously. Functions in jQuery are basically created and tied directly with jQuery’s object: ‘jQuery’ and its alias, ‘$’ dollar sign. In other words, whenever you need it, just call it directly via jQuery’s object. Most of the time, it’s also called as ‘public method’ which will be directly called for getting a result. The way we define the function is as follows:

 $.myOwnFunction = function(){
  //put your code here...
};
//to call it
 $.myOwnFunction();

Pretty straight-forward, right? What you need to do is putting everything inside ‘myOwnFunction’ function that attached to jQuery object and then call it straight via its object.

Which one should be used?
To me, it really depends on what you are going to do with your plugin. You may just either use method or function, or even both of them in your jQuery plugin. But, always ask yourself what is the purpose of creating this method/function? Would it be used for chaining? With this concept in your mind, you are able to create jQuery plugins, on the fly.

3) Using jQuery, $.extend()
You must always understand and clear with a method or function you are going to use, before you’re getting frustrated of it. So, if you do not know what is jQuery’s extend() used for, here you go. Most of the time, you will need $.extend() to extend jQuery’s object. Say, I have already created a function, named as ‘myOwnFunction’ and I wanted to extend it with an object-literal and to allow me to access the properties from the object-literal, via ‘myOwnFunction’. Here is what I will do:

 $.myOwnFunction = function(){
  //my code here...
};
//extend the function and make it as 'object function'
 $.myOwnFunction  = $.extend( $.myOwnFunction, {
   name1: value1,
   func1: function(){
    //some block code...
  },
  //more functions/properties here...
} );

So, what was just happening? By using $.extend(), I have actually made the ‘myOwnFunction’ as an object, too! That means, I can now not only call the function via $ object, and at the same time, I can ‘extend’ the function to play as object as well, in order to access the properties/ functions from the object-literal.

Sometimes, you may want to allow user inputs options apart from the default settings in your plugin. Here, $.extend() will take the place, again. For instance:

  $.myOwnFunction = function( userOptions ){
  //the default settings...
    myDefaultSetting = {
     name1 : value1,
     nameN : valueN
    };
  //merge it with default or, overwrite when different value assigned...
   if( userOptions  ){
      myDefaultSetting = $.extend( myDefaultSetting, userOptions );
  }
};

The example above is to allow users provide the options apart from using yours default values. Don’t you think that it will be more user-friendly plugin, huh? Give applause to jQuery!

4) The $(‘id’).find() method
Last but not least, one more important thing we should take note is always looking for the correct and matched to the right HTML element. From what I have experienced, sometimes we might forget or overlook to look up the correct HTML elements. It will be a pitfall if we never look for an HTML element in detailed, although everything seems working pretty fine. Well, just consider of this example:

        $("div>ul").css("background-color", "blue");  
        $("ul>li").css("background-color", "pink");

From the code, everything seems like working pretty well, where we have tried to set the respective background colours to the ‘ul’ tag and its ‘li’ in div element, whereas, blue and pink colours. Yet, if you try to duplicate the same div element with ‘ul’ tag resides in it, and then run the code again you will see that, it will apply to all ‘ul’ elements! Think further a little, how about if the developers out there are using your plugin, but it ruins the whole layout in case they are using ‘ul’ in the div element, too!

So, whenever possible, try to use jQuery’s find() method to look up more specific HTML element. This will avoid the problem happening as I mentioned just now. OK, we tweak the code a little as such:

$("div#myId").find("ul").css("background-color", "#ccccff");  
$("div#myId").find("ul>li").css("background-color", "pink");

Now, we are able to look for more specific HTML element without affecting user’s interface. If you are putting the code in $.each() function, always use ‘this’ instead since it’s always referred to the current HTML element’s object. The benefit is, when you want to change the div’s id, you do not need to change it in everything single line of code and therefore, save your time from there.

Hope this post will help someone who is going to author his/her own jQuery plugin(s).

Related posts:

1. Tutorial: How to Write Your Own jQuery Plugins?
2. s3slider: Fading your images with jQuery plugin
3. jQuery: Implement Ajax with $.ajax()
4. Create Fancy Loading Effect with jQuery
5. John Resig: JavaScript & jQuery

I understand that, those programmers who come from C/C++ or C# background, commonly write their code in K&R style, which is typically place the first curly brace at the following line just after the declaration, and ended by another curly brace. However, there is a pitfall when writing this style in JavaScript. Well, without talking much, why not we just take a look at the code, as follows:

Code A:

//ERROR: Silent and returned 'undefined' value
function myFunction()
{
  //some code here...
  return;
  {
    name1: value1,
    name2: value2
  }
}

Code B:

//valid, returned object literal notaton
function myFunction(){
  //some code here...
 return {
  name1: value1,
  name2: value2
 }
}

At the first glance, both of the examples look identical and return the same result. Whereas, the declared function will return an object literal notation, in name-value pairs. But, if you look closely, it’s actually returning two different results. In Code A example, we exit the function immediately when ‘return’ is encountered, and therefore return ‘nothing’, because of the object literal {} are located at the next line of ‘return’ reserved word. In other words, the following code will not be executed and ‘undefined’ value is returned. (I added a semicolon (;) after ‘return’ word to make code looks clearer, which should indicate the end of the current line of code.)

Conversely, if you look at the Code B, which is written in BSD KNF style, the code is perfectly executed and an object literal notation is returned. This is because of the first curly brace of the object literal is recognized when we put it just after the ‘return’ reserved word. Apparently, it returns a value here; the said object literal.

Good Practice
So, what is the key point from the above example? The conclusion is, just try make it as a good practice to indent the code by using BSD KNF style, especially in JS. It’s surely alright if you are using other indentation patterns. Of course, it’s still valid. But, somehow, in certain circumstances, you might be creating problems or pitfalls without your conscious and getting the unexpected results, just like the case I mentioned previously.

NOTE:
This post is not comparing the pros/cons between ‘BSD KNF style’ and ‘K&R style’. The writer just borrowed the terms to make thing clearer and for better explanation.

No related posts.

]]> http://borisding.com/2009/12/indent-style-in-javascript/feed/ 0 http://borisding.com/2009/12/advanced-js-having-fun-with-javascript-design-patterns/ http://borisding.com/2009/12/advanced-js-having-fun-with-javascript-design-patterns/#comments Wed, 09 Dec 2009 15:37:39 +0000 boris http://borisding.com/?p=1374

JavaScript: Different Methods of Writing “Hello World!”

JavaScript – Testing on ‘Prototype’ Together with Object Literal

JavaScript – The Object-oriented Programming

]]> Undeniable, a well design pattern is required when writing your own JavaScript libraries or frameworks, that could be used for personal or industry purpose. There are many design patterns can be found online which come together with demo or examples; different people, may have different taste of writing their own code.

Many developers are talking about design patterns. Well, to me, it really doesn’t matter what kind of design pattern you are using, as long as it’s readable, well-organized and adaptable as well as maintainable, it’s all fine.

I have recently played around with JS design pattern, as well. When deeper I delve into, JS surprises me more! I could say that, this is the only programming language (so far) can really make me feel excited and willing to spend my time on it. It’s worth.

So, what is the result I come out? Ok, here is an example I have written, which I consider it could be used for designing library or framework:

(function(){
 var
 window = this || {};
 //check on LIB object
 if( typeof LIB !== "object" ){
  LIB = window;
 }
 //define alternate object
 //in case, LIB object is overwritten
  _LIB = LIB = window.LIB;
 
/** MODULE ONE **/ 
 LIB.ModuleOne = (function(){
  //Add private function(s) in ModuleOne
   function privateFncOne(){
    var localVar = "this is local variable in 'privateFncOne' funciton, ModuleOne";
    alert(localVar);
	/*
	 do more thing from here
	 or, even add closures...
	*/
   }
 
   //object literal
   var coreOne = {
     propertyOne: "This is propertyOne's value",
	 fncOne: function(){
	   this.text = "This is function resides in object literal from ModuleOne";
	   alert(this.text);
 
       //retrieve object
	   var o = LIB.ModuleTwo.fncTwo();
	   if( typeof o === "object" ){
	    //call function
		o.greetFnc();
		//display text
		 alert(o.greetText);
	   }
	 }
	 /*
	  a block of code putting here...	 
	 */
   }//end core
   return coreOne;
 })();
 
/** MODULE TWO **/
 LIB.ModuleTwo = (function(){
  //Add private function(s) in ModuleTwo
  function privateFncTwo(){
   var localVar = "this is local variable in 'privateFncTwo' function, ModuleTwo";
   	/*
	 do more thing from here
	 or, even add closures...
	*/
  }  
   //object literal
   var coreTwo = {
     propertyOne: "This is propertyOne's value",
	 fncOne: function(){
	   this.text = "This is function in object literal from ModuleOne";
	   alert(this.text);
	 },
 
	 fncTwo: function(){
	  //return object literal
	  return LIB.ModuleOne.fncOne.prototype.objectLiteral = {
	    greetText : "Have a nice day!",
		greetFnc: function(){ alert("How is your day?"); }
	  }
	 }
	 /*
	  a block of code putting here...	 
	 */
   }//end core
   return coreTwo;
 })();
})();
 
//EXAMPLE OF CALLING FUNCTION
/**
Result:
This is function resides in object literal from ModuleOne
How is your day?
Have a nice day!
**/
 LIB.ModuleOne.fncOne();

Basically, the core idea is to create an object, in this case, ‘LIB’ with two main modules, respectively. As you can find, there are private function(s), object literals or even to allow you add more functions/closures (or, whatever terminology you have? |o|), just inside the respective modules.

From the example, I have also shown you how to call one of the functions that resides in the first module. And therefore, retrieve following data that returned from the second module and so on. Some developers might call it as ‘Module Pattern‘, which was coined by Douglas Crockford, from Yahoo! Just somehow, the code might look a bit bulky.

Again, JavaScript is NOT a toy!

Should you have any feedback or comments, just feel free to post here for discussion. Happy JavaScripting!

Related posts:

1. JavaScript: Different Methods of Writing “Hello World!”
2. JavaScript – Testing on ‘Prototype’ Together with Object Literal
3. JavaScript – The Object-oriented Programming

]]> http://borisding.com/2009/12/advanced-js-having-fun-with-javascript-design-patterns/feed/ 0 http://borisding.com/2009/12/passing-object-literals-property-to-external-function/ http://borisding.com/2009/12/passing-object-literals-property-to-external-function/#comments Sun, 06 Dec 2009 08:52:10 +0000 boris http://borisding.com/?p=1311 Recently, I have been coding JavaScript heavily in Object-Literal manner. As you may have already known, this is one of the most popular and modern methods of writing JS code. You are allowed to access any property and method via object, at anytime and anywhere. It is possible to pass object literal’s properties to the external function(s). When I say ‘external’, it means the function that’s not residing in the curly brackets {}. Consider the below code as an example:

var person = {
  name: "",  
  displayName: function( personName ){
   this.name = personName;
   alert( this.name );   
   this.displayNameAgain();
  }
}
 
person.displayNameAgain = function(){
 var myName = this.name;
 alert( "Once again, called my name: " + myName );
}
//call to display person's name
person.displayName("Boris Ding");

If you are one of the geeks writing JS in this manner, the code shown as above should be looking fine to you. As you can see, there was a ‘name’ property and ‘displayName’ function, with one argument, assigned to the object, whereas ‘person’ with the mentioned property and function reside in the curly brackets {}

Perhaps, you have also noticed that, there was an external function, too. And, I named it as ‘displayNameAgain’ that has been created via the ‘person’ object, as well. The purpose of having this function is to retrieve the person’s property, as in the ‘name’ and being displayed whenever it’s called.

Well, how to make all things work together?

When the ‘displayName’ function is called, by passing a value, for this case is my name ‘Boris Ding’ something like so:

person.displayName("Boris Ding");

As what you have expected, I actually called the ‘displayName’ function via person object. Before I’m prompted with the alert pop-up, the ‘name’ property has initially been assigned to the value I have passed in, whereas via the ‘personName’ argument. Needless to say, the ‘name’ property is now holding the value of ‘Boris Ding’ that assigned to it and therefore, I got the alert pop-up with ‘Boris Ding’ displayed.

Once I was prompted with the alert pop-up, the next line is calling the next function, which is ‘displayNameAgain’ that previously created as external function. The function looks something like so:

person.displayNameAgain = function(){
 var myName = this.name;
 alert( "Once again, called my name: " + myName );
}

Within this function, I have actually assigned the ‘name’ property’s value to the local variable, ‘myName’. Since this word is always referring to the current object, (‘person’ in this case), it should be done like so:

 var myName = this.name;

As I mentioned, since ‘displayNameAgain’ was created via ‘person’ object and this reserved word refers to the current object as well, so, to call the function, this is the code how we do it:

   this.displayNameAgain();

And it yields the result, another alert pop-up as follows:

How it works?
As you have seen, the local variable ‘myName’ is now holding the same value with ‘name’ property in the curly brackets. How could it be? The reason is fairly simple. As mentioned, ‘name’ is the property of ‘person’ object. As, I have defined ‘displayNameAgain’ function via ‘person’ object, too. Just the difference is, I’m putting it outside of the {} that assigned to ‘person’ object. So, it’s possible to pass the ‘name’ property’s value to the local variable, ‘myName’ that resides in the ‘displayNameAgain’ function. Likewise, for calling the ‘displayNameAgain’ function, you may also call it by using ‘person.displayNameAgain()‘ or, preferably, in this way: ‘this.displayNameAgain()‘, whereas, this refers to the current object, which is ‘person’ in this example.

I hope this simple example will make things become clearer.

No related posts.

]]> http://borisding.com/2009/12/passing-object-literals-property-to-external-function/feed/ 0 http://borisding.com/2009/11/some-security-practices-in-web-development-part-ii/ http://borisding.com/2009/11/some-security-practices-in-web-development-part-ii/#comments Sun, 29 Nov 2009 12:07:31 +0000 boris http://borisding.com/?p=1183 Not long ago, I had briefly mentioned some security practices that may need to be applied in Web Development. This post, I’m going to list out some other good practices that developers may need to follow when writing their code, in order to avoid malicious attacks.

@1: SQL Injection
Most of the developers are aware of this issue, however, most of the time, some of the developers are still repeating the poor manner of writing SQL statements when querying data from the database. In case you don’t know what SQL Injection is all about, according to Wiki, the easiest way to explain SQL injection is as follows:

SQL injection is a code injection technique that exploits a security vulnerability occurring in the database layer of an application.

This problem occurs is mainly caused by improper inputs filtering and leads to the vulnerability, as in this example written in PHP:

$sql = "SELECT * FROM tbl_user WHERE email = '". $userEmail ."'";

$userEmail is basically a variable that holds the user’s email address, that’s going to be used in SQL statement for querying user particular. Saying that, this variable has never been filtered before going into SQL, a malicious user may assign invalid email address by entering arbitrary string that ruins your SQL statement, for example, assigned “myemail@testdomain.com’” to $userEmail variable, and yields the SQL like so:

SELECT * FROM tbl_user WHERE email = 'myemail@testdomain.com'';

If you never filter the inputs before querying, you will get an error instead. What about if you are querying password or some other confidential data? The malicious users are able to retrieve it in this way! So keep in mind that, always escape the string before going into SQL. If you are PHP developer and dealing with MySQL database, you may use mysql_real_escape_string() built in function (preferred), otherwise you may use addslashes(), instead. Alternatively, you may also use PHP’s magic quotes function, however, this has been removed in PHP6. So, relying on this feature is strongly discouraged. (Read more)

@2: Password Encryption
A good application should always encrypt users’ password, all the time. This is to add the extra layer of security to protect the privacy of users. Unfortunately, there are still many applications do not encrypt password provided by end users, and being stored as plain text in the database. As I mention ‘plain text’, yes, it’s the exact password you provided when signing up an account on the particular web application/website and stored as it is.

From developer’s perspective, (if you claimed yourself as a ‘good’ + ‘professional’ developer), you should always provide a function to encrypt the confidential data, such as password and so on. PHP itself has already provided number of built in functions to encrypt data, such as: md5(), crypt(), sha1() (for One-Way encryption) and ext/mcrypt (for Two-Way encryption); I had also written a simple PHP Two-Way encryption tool – BPEncryptor, as recently announced in this post. However, it does not support unicode character at this time.

@3: PHP File Settings
If you are PHP developer, you may need to pay attention in PHP settings. The most common settings should correctly be set, for the sake of security concerns. Some of the settings need to be checked in php.ini file such as: Disable allow_url_fopen and Turn off global variables.

i) Disable allow_url_fopen
- If allow_url_fopen option is turned on in the php.ini file settings, you’re basically allowing the files to be accessed via a remote location using URL, instead of local path. Attackers may input some malicious code into this function if your PHP application lacks of data filtering. In case, you really need to allow users access to the files (perhaps, text files), you are advised to use Client URL (cURL) functions instead of using allow_url_fopen. So, make sure this option is always set as ‘off’ mode in php.ini file.

ii) Turning off global variables
- Most of the time, those novice programmers (who lack of experience) preferred to use this advantage by turning on the global variables in php.ini file. In fact, by turning on this option, a developer basically provides the way to attackers to overwrite the values that have been assigned to $_GET, $_POST request. This feature is disabled by default from PHP 4.2 onwards and it’s been deprecated as of PHP 5.3.0 and completely removed as of PHP 6.0. So, turning on this option is highly discouraged.

@4: Avoid JavaScript’s eval()
eval() is a built in function in JavaScript and used for evaluating strings and executing the particular string as JavaScript code. It’s convenient and from time to time developers/front-end developers will be using it to fulfill certain needs. However, if possible, try to avoid it. As far as I’m concerned, many developers are using this function for converting JSON data into valid JavaScript objects, a better term – parsing JSON data. Frankly, I’m one of them for the sake of convenience and its simplicity. Consider this simple example:

eval('(' + jsonData + ')');

A line of code shown as above is the simplest method for parsing JSON data, most of the time that sent from the back-end to front-end. Or better manner as such:

var JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
jsonData .replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + jsonData + ')');

You may get the expected result by running the code snippet above. However, somehow, you are actually providing vulnerabilities to attackers to inject malicious code to eval() function, especially when you’re retrieving JSON data from unknown source.

The more secure and effective method used for parsing JSON data is Crockford’s JSON parser. In those modern browsers with most recent version, such as Firefox 3.5 and IE 8.0 have actually provided the built in JSON parser. So, you may use the JSON parser for converting JSON data, as follows:

 var o = JSON.parse(jsonData);

Alternatively, you may also download the utility from http://www.json.org/js.html for the support in prior version of browsers.

Security topic is not enough and well explained in just a single post. The above points I highlighted are just tip of the iceberg. However, keep in mind that, some good practices should always be followed when developing your own web application/website, in order to reduce security vulnerabilities.

No related posts.

]]> http://borisding.com/2009/11/some-security-practices-in-web-development-part-ii/feed/ 0 http://borisding.com/2009/11/javascript-testing-on-prototype-together-with-object-literal/ http://borisding.com/2009/11/javascript-testing-on-prototype-together-with-object-literal/#comments Mon, 23 Nov 2009 04:42:13 +0000 boris http://borisding.com/?p=1168

JavaScript: Different Methods of Writing “Hello World!”

Advanced JS: Having Fun with JavaScript Design Patterns

JavaScript – The Object-oriented Programming

]]> It’s exciting whenever I’m playing around with JavaScript. Today, I suddenly have this question come across to my mind; how do I use prototype method together with object literal? Is there any way to do something different with the traditional method? Ok, here is what I have tested out:

Saying that, I have a function which will be playing as constructor by having one argument with it, and I need to create another function that will display my name, from the property that resides in the constructor. Ok, the typical method we do could be something like so:

Traditional prototype in Object-oriented:

    function myFnc( myName ){
      this.name = myName;
    }
 
    myFnc.prototype.displayName = function(){
      alert( this.name );
    }
 
    var obj = new myFnc( "Boris Ding" );
    obj.displayName();

Well, as expected, I was able to get the result I want. Then, I have tried out and rewritten the functions above in object-literal pattern, as follows:

Prototype with Object-literal:

     var myObj = (function(){
        doSomething = {
            myFnc: function( myName ){
              this.name = myName;
            }            
            /*some block of JS code below*/
        }
        return doSomething;
     })();
 
     myObj.myFnc.prototype.displayName = function(){
       alert( this.name );       
     }

Interestingly, everything just works pretty well. I executed the code in the most recent version of Firefox, Safari, IE, Chrome and Opera browsers, it works perfectly. I will assume this should be working fine in prior version of those mentioned browsers, as well. (Or, you may try it out?)

The assumption I made is, since we’re able to call the particular function that resides in the curly brackets {}, via the object, for instance to access ‘myFnc’ function, it can be invoked like this: myObj.myFnc(), yet, it’s playing as constructor at the same time, so I just extend the function with the prototype that is shown as above, in order to display the name from the constructor’s property; here how it looks like:

     myObj.myFnc.prototype.displayName = function(){
       alert( this.name );       
     }

So, as mentioned, it proved that this method is working pretty well together with object-literal. Perhaps, it will make the code clearer and well-organized in somewhere, even though the code does look a bit bulky in this manner. What do you think? =)

Related posts:

1. JavaScript: Different Methods of Writing “Hello World!”
2. Advanced JS: Having Fun with JavaScript Design Patterns
3. JavaScript – The Object-oriented Programming

]]> http://borisding.com/2009/11/javascript-testing-on-prototype-together-with-object-literal/feed/ 0