JavaScript

Multiple Upload Using Single Upload File With jQuery

This is a trick to perform multiple upload using a single upload bar instead of multiple upload bars created by stickman. If you are looking for multiple upload using iframe or asynchronous method, you can visit this simplest way tutorial that explains how iframe method can be done and whether ajax method is available. I first came across stickman article was when i was doing research for multiple upload without having the file uploaded into the server. His idea was brilliant. However, i hardly have the need for such function until recently when my project submit form required multiple upload using a single upload bar again. Stickman method was pure JavaScript which is great and efficient but i needed something from jQuery. Here, i will try to simplify his method into jQuery form.

Concept of Single Multiple Upload File

In order to achieve single multiple upload file, we will have to understand that multiple upload is still possible even without asynchronous upload, that is, we will need multiple upload bar displaying on the screen and having user to click on each upload bar to upload multiple item at once. In stickman concept, its almost the same. The only differences is that he uses one upload bar and insert a new one on top of the existing upload bar AFTER a user has finished selected the item to be uploaded. Therefore it seems like there is only one upload bar. (the process is too fast for our eyes to follow. Thus, we all get trick when this happen) But in reality, all these upload bars were only hidden from user but not from codes. Once, the submit button is pressed, all the visible and non-visible upload bars are being uploaded to the server! This way we get our cheap multiple upload using a single upload bar method.

jQuery Single Multiple Upload File

I won't be displaying stickman code in this article as you can download directly from his website. We can now proceed with the coding after we have understand how stickman method works.

HTML code

All we need on the HTML section are these:

<div>
	<input type="file" name="files[]">
	<div id="upload_list"></div>
</div>

jQuery code

jQuery code is fairly simple. Let's don't complicate stuff. All we need to do is this.

jQuery(document).ready(function($){
var replaceMe = function(){
	var obj = $(this);
	$(obj).css({'position':'absolute','left':'-9999px','display':'none'}).parent().prepend('<input type="file" name="'+obj.attr('name')+'"/>')
	$('#upload_list').append('<div>'+obj.val()+'<input type="button" value="cancel"/><div>');
	$("input[type='file']").change(replaceMe);
	$("input[type='button']").click(function(){
		$(this).parent().remove();
		$(obj).remove();
	});
}
$("input[type='file']").change(replaceMe);
});

The above takes care of the basic. If you wish to restrict the number of upload, you can place a restriction variable.

jQuery(document).ready(function($){
var max = 2;
var replaceMe = function(){
	var obj = $(this);
	if($("input[type='file']").length > max)
	{
		alert('fail');
		obj.val("");
		return false;
	}
	$(obj).css({'position':'absolute','left':'-9999px','display':'none'}).parent().prepend('<input type="file" name="'+obj.attr('name')+'"/>')
	$('#upload_list').append('<div>'+obj.val()+'<input type="button" value="cancel"/><div>');
	$("input[type='file']").change(replaceMe);
	$("input[type='button']").click(function(){
		$(this).parent().remove();
		$(obj).remove();
		return false; //safari fixes
	});
}
$("input[type='file']").change(replaceMe);
});

Where max is the counter that restricts the number of uploads. Since jQuery takes care of most of the complicated things. The code eventually became smaller. For some reason bind doesn't works for the event change. Thus, i will have to attach the event again. From pure JavaScript of 156 line into a few line of codes, jQuery definitely makes developers life much more easier (doesn't means the code produce by jQuery is much more efficient though.).

The Demo

The demo can be found here.

Conclusion

The above jQuery code has simplify the version found on stickman site. Although the display doesn't looks as attractive but my objective has been achieved. Sometimes, JavaScript can be harder to read compared to a jQuery one. However, JavaScript version still has a better efficiency as compared to a jQuery one.

Tutorial: disable _blank attribute from opening new window

Today is an interesting day. I was working on my project and found that i have a hard time looking for a way to disable my target attribute, _blank, which will open a new window and display the item there.  Surprisingly, i found tons of how to create pop out box and many discussion regarding setting up a window.open instruction. But no one care to explain how to stop or disable it! Hence, i decide to write it out myself.

Pop out box

We all know how to enable a pop out box. We can do that either by window.open or using target attribute _blank to pass the work to another window. We can also do that for form submission but bringing out another box is not very professional unless you are showing certain information. Hence, most of us will go with ajax or iframe way of synchronize submission. Nonetheless, pop out box is a necessity in our web environment. While opening a new window box is easy but how about disabling it?

Disable _blank attribute

Disabling a pop out box or anything that will pop out is pretty simple. If you try to recall how you disable those anchor link, you might have an idea how you are going to disable all other types of link. Most pop out box is being initialize by a click. Hence, the event that we are interested with is onclick event handler. However, different people will have different ways of disabling an anchor link such as

<a href="JavaScript: void();">link</a>

or

<a href="#">link</a>

But we are interested in

<a href="JavaScript: return false;">link</a>

In order to disable pop out, it is the same as how we used to disable link. Hence, if you have a link such as this,

<a href="http://somewhere.com" target="_blank">link</a>

it will bring you to somewhere.com on a new pop out box. And if you want to prevent that, you will do this.

<a href="http://somewhere.com" target="_blank" onclick='return false;'>link</a>

That's it! To prevent window.open, we just remove that sentence! haha..

17 JavaScript Form Validation Snippets

Last week i wrote 25 form validation for PHP. I find useful to have more layer of defend as JavaScript might malfunction or disable and cause your validation to fail but the form is still being passed on to our server. Nonetheless, JavaScript validation does provide certain level of restriction and protection for any web application. Especially when web is evolving quickly in this period of time. We are required to validate any data from our user to prevent any harm that can cause damage to our application and businesses. These JavaScript form validation snippets are needed in every form validation and repeating searching for them is unnecessary and slow down development processes. Therefore, you might want to bookmark these snippets for your future needs

Email Validation

Email validation is the most basic validation that any web application would have.

function isEmail(elem, helperMsg){
	var regexp  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if(regexp.test(elem.value)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var email = document.getElementById('ham_email');
if(isEmail(email, "Invalid Email Format")){
//proceed..
}

URL Validation

URL validation helps to validate whether a particular string is a valid url format.

function isUrl(elem, helperMsg) {
	var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
	if(regexp.test(elem.value.toLowerCase())){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var link = document.getElementById('ham_link');
if(isUrl(link, "Invalid link")){
//proceed..
}

Username Validation

This function help us validate whether a username contain valid character and length. It accept any underscore, alphabets and numbers within 5-25 characters.

function isValidUsername(elem, msg) {
	var regx = /^[A-Za-z0-9_]{5,25}$/;
	if(regx.test(elem.value)){
		return true;
	}else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

You can add additional symbols or change the length of the validation easily by alter the regular expression.

In order to use this, we pass in an object and an alert value if it fail.

var username = document.getElementById('username');
if(isValidUsername(username, "Invalid character found on username!")){
//proceed...
}

Password Validation

Here is a simple password strength validation that check the following criteria.

  1. Passwords will contain at least 1 upper case letter
  2. Passwords will contain at least 1 lower case letter
  3. Passwords will contain at least 1 number or special character
  4. Passwords will contain at least 8 characters in length
  5. Password maximum length should not be arbitrarily limited
function isStrongPassword(elem, msg) {
	var regx = /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/;
	if(regx.test(elem.value)){
		return true;
	}else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var password = document.getElementById('password');
if(isStrongPassword(password, "Your password fail the basic strength test. \n1. Passwords will contain at least 1 upper case letter\n2. Passwords will contain at least 1 lower case letter\n3. Passwords will contain at least 1 number or special character\n4. Passwords will contain at least 8 characters in length\n5. Password maximum length should not be arbitrarily limited\n")){
//proceed..
}

Numeric Validation

This validate whether a given string contain a valid numeric value which include both negative value and decimal ones.

function isNumeric(elem, helperMsg){
	var numericExpression = /^[-]?\d*\.?\d*$/;
	if(elem.value.toString().match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var price = document.getElementById('price');
if(isNumeric(price, "Invalid value found")){
//proceed...
}

Text Empty Validation

In every form validation, there is always a need to check whether a particular text box is empty.

function isEmpty(elem, helperMsg){
	if(elem.value.toString().length > 0){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var name = document.getElementById('ham_company');
if(!isEmpty(name, "Please give us your name")){
//proceed...
}

Radio Box Validation

We can determine whether a radio box has been selected using this function.

function hasSelected(elem, msg){
	for (i = 0; i < elem.length; i++) //for all check boxes
	{
		if (elem[i].checked == true ) //otherwise elements also looks at radio buttons
		{
			return true;
		}
	}
	alert(helperMsg);
	elem[0].focus();
	return false;
}

Drop Down Validation

We also check whether a particular drop down box has its value selected with the following function.
In order to use this, we pass in an object and an alert value if it fail.

var radio = document.getElementById('radio');
if(hasSelected(radio, Please select your gender")){
//proceed...
}

function isSelected(elem, helperMsg){
	if(elem.options[elem.selectedIndex].value.toString().length > 0){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

In order to use this, we pass in an object and an alert value if it fail.

var month = document.getElementById('ham_month');
if(isSelected(month, "Please select a month")){
//proceed...
}

Check Box Validation

We can perform check box validation to see whether a particular check box has been selected through this function.

function hasChecked(elem, msg){
	for (i = 0; i < elem.length; i++) //for all check boxes
	{
		if (elem[i].checked == true ) //otherwise elements also looks at radio buttons
		{
			return true;
		}
	}
	alert(helperMsg);
	elem[0].focus();
	return false;
}

In order to use this, we pass in an object and an alert value if it fail.

var checkbox= document. getElementsByName('checkbox');
if(checkPhone(checkbox, "Please tick one of the check box")){
//proceed...
}

Phone Validation

This function will validate the following criteria phone number.

  • phone:
    339-4248
    339-42-48
    339 42 48
    339 4248
    3394248
    (095) #phone#
    (095)#phone#
    +7 (095) #phone#
    +7 (095)#phone#
    +7(095) #phone#
    +7(095)#phone#
function checkPhone(elem, msg)
{
	var str = elem.value;
	var phone2 = /^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/;
	if (str.match(phone2)) {
   		return true;
 	} else {
 		alert(helperMsg);
		elem.focus();
		return false;
 	}
}

In order to use this, we pass in an object and an alert value if it fail.

var phonenumber = document.getElementById('phonenumber');
if(checkPhone(phonenumber, "Invalid Phone Number")){
//proceed...
}

File Extension Validation

This function validate whether a particular upload string contains a valid extension.

function isAllowedFileExtension(elem, helperMsg){
	var alphaExp = /.*\.(gif)|(jpeg)|(jpg)|(png)$/;
	if(elem.value != "")
	{
		if(elem.value.toLowerCase().match(alphaExp)){
			return true;
		}else{
			alert(helperMsg);
			elem.focus();
			return false;
		}
	}
	else
		return true;
	return false;
}

In order to use this, we pass in an object and an alert value if it fail.

var upload = document.getElementById('ham_upload');
if(isAllowedFileExtension(upload, "Please Upload Gif, Png or Jpg Images Files Only")){
//proceed...
}

IP Validation

Sometimes there is a need to validate whether a particular IP address is valid using JavaScript.

function isValidIPAddress(elem, msg) {
   var re = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
   ipaddr = elem.value.toLowerCase();
   if (re.test(ipaddr)) {
      var parts = ipaddr.split(".");
      if (parseInt(parseFloat(parts[0])) == 0) { return false; }
      for (var i=0; i<parts.length; i++) {
         if (parseInt(parseFloat(parts[i])) > 255) { return false; }
      }
      return true;
   } else {
		alert(helperMsg);
		elem.focus();
		return false;
   }
}

In order to use this, we pass in an object and an alert value if it fail.

var ip= document.getElementById('ip');
if(isValidIPAddress(ip, "Invalid IP Address")){
//proceed...
}

US Social Security Number Validation

Testing US Social security number can be done with the below function.

function isValidSSN(elem, msg) {
	var value = elem.value.toLowerCase();
	var tmp = false;
    var re = /^([0-6]\d{2}|7[0-6]\d|77[0-2])([ \-]?)(\d{2})\2(\d{4})$/;
    if (!re.test(value)) { tmp = true; }
    var temp = value;
    if (value.indexOf("-") != -1) { temp = (value.split("-")).join(""); }
    if (value.indexOf(" ") != -1) { temp = (value.split(" ")).join(""); }
    if (temp.substring(0, 3) == "000") { tmp = true; }
    if (temp.substring(3, 5) == "00") { tmp = true; }
    if (temp.substring(5, 9) == "0000") { tmp = true; }

	if(tmp){
		alert(helperMsg);
		elem.focus();
		return false;
	}else
    return true;
}

In order to use this, we pass in an object and an alert value if it fail.

var ssn = document.getElementById('ssn');
if(isValidSSN(ssn, "Invalid US Social Security Number")){
//proceed...
}

US Zip Code Validation

We can valid US zip code using the following function.

function isValidZipCode(elem, msg) {
   var re = /^\d{5}([\-]\d{4})?$/;
   var value = elem.value.toLowerCase();
   if(re.test(value)){
		return true;
   }else {
		alert(helperMsg);
		elem.focus();
		return false;
   }
}

In order to use this, we pass in an object and an alert value if it fail.

var zip= document.getElementById('zip');
if(isValidSSN(zip, "Invalid US Zip Code")){
//proceed...
}

Date Validation

This function validate date with a given format.

function isValidDate(dateStr, format) {
   if (format == null) { format = "MDY"; }
   format = format.toUpperCase();
   if (format.length != 3) { format = "MDY"; }
   if ( (format.indexOf("M") == -1) || (format.indexOf("D") == -1) || _
      (format.indexOf("Y") == -1) ) { format = "MDY"; }
   if (format.substring(0, 1) == "Y") { // If the year is first
      var reg1 = /^\d{2}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
      var reg2 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
   } else if (format.substring(1, 2) == "Y") { // If the year is second
      var reg1 = /^\d{1,2}(\-|\/|\.)\d{2}\1\d{1,2}$/
      var reg2 = /^\d{1,2}(\-|\/|\.)\d{4}\1\d{1,2}$/
   } else { // The year must be third
      var reg1 = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{2}$/
      var reg2 = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
   }
   // If it doesn't conform to the right format (with either a 2 digit year or 4 digit year), fail
   if ( (reg1.test(dateStr) == false) && (reg2.test(dateStr) == false) ) { return false; }
   var parts = dateStr.split(RegExp.$1); // Split into 3 parts based on what the divider was
   // Check to see if the 3 parts end up making a valid date
   if (format.substring(0, 1) == "M") { var mm = parts[0]; } else _
      if (format.substring(1, 2) == "M") { var mm = parts[1]; } else { var mm = parts[2]; }
   if (format.substring(0, 1) == "D") { var dd = parts[0]; } else _
      if (format.substring(1, 2) == "D") { var dd = parts[1]; } else { var dd = parts[2]; }
   if (format.substring(0, 1) == "Y") { var yy = parts[0]; } else _
      if (format.substring(1, 2) == "Y") { var yy = parts[1]; } else { var yy = parts[2]; }
   if (parseFloat(yy) <= 50) { yy = (parseFloat(yy) + 2000).toString(); }
   if (parseFloat(yy) <= 99) { yy = (parseFloat(yy) + 1900).toString(); }
   var dt = new Date(parseFloat(yy), parseFloat(mm)-1, parseFloat(dd), 0, 0, 0, 0);
   if (parseFloat(dd) != dt.getDate()) { return false; }
   if (parseFloat(mm)-1 != dt.getMonth()) { return false; }
   return true;
}

You will use the function this way,

if (!isValidDate(myDateString, "DMY")) { alert("The date is not in the correct format."); }

Time Validation

This function validate time such as

  1. 02:25AM
  2. 00:23PM
  3. 23:45PM
  4. 11:23
  5. etc.
function isValidTime(value) {
   var hasMeridian = false;
   var re = /^\d{1,2}[:]\d{2}([:]\d{2})?( [aApP][mM]?)?$/;
   if (!re.test(value)) { return false; }
   if (value.toLowerCase().indexOf("p") != -1) { hasMeridian = true; }
   if (value.toLowerCase().indexOf("a") != -1) { hasMeridian = true; }
   var values = value.split(":");
   if ( (parseFloat(values[0]) < 0) || (parseFloat(values[0]) > 23) ) { return false; }
   if (hasMeridian) {
      if ( (parseFloat(values[0]) < 1) || (parseFloat(values[0]) > 12) ) { return false; }
   }
   if ( (parseFloat(values[1]) < 0) || (parseFloat(values[1]) > 59) ) { return false; }
   if (values.length > 2) {
      if ( (parseFloat(values[2]) < 0) || (parseFloat(values[2]) > 59) ) { return false; }
   }
   return true;
}

Credit Card Validation

This function validate whether a given string format is similar to a credit card type.

function isValidCreditCard(type, ccnum) {
   if (type == "Visa") {
      // Visa: length 16, prefix 4, dashes optional.
      var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "MC") {
      // Mastercard: length 16, prefix 51-55, dashes optional.
      var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "Disc") {
      // Discover: length 16, prefix 6011, dashes optional.
      var re = /^6011-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (type == "AmEx") {
      // American Express: length 15, prefix 34 or 37.
      var re = /^3[4,7]\d{13}$/;
   } else if (type == "Diners") {
      // Diners: length 14, prefix 30, 36, or 38.
      var re = /^3[0,6,8]\d{12}$/;
   }
   if (!re.test(ccnum)) return false;
   // Remove all dashes for the checksum checks to eliminate negative numbers
   ccnum = ccnum.split("-").join("");
   // Checksum ("Mod 10")
   // Add even digits in even length strings or odd digits in odd length strings.
   var checksum = 0;
   for (var i=(2-(ccnum.length % 2)); i<=ccnum.length; i+=2) {
      checksum += parseInt(ccnum.charAt(i-1));
   }
   // Analyze odd digits in even length strings or even digits in odd length strings.
   for (var i=(ccnum.length % 2) + 1; i<ccnum.length; i+=2) {
      var digit = parseInt(ccnum.charAt(i-1)) * 2;
      if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
   }
   if ((checksum % 10) == 0) return true; else return false;
}

Summary

Usually i will use these code in such a way to validate my form. I find it neat and tidy.

form.onsubmit = validation;
var validation = function(){
	var name = document.getElementById('ham_company');
	var email = document.getElementById('ham_email');
	var link = document.getElementById('ham_link');
	var description = document.getElementById('ham_desc');
	var banner = document.getElementById('ham_banner');
	var month = document.getElementById('ham_month');
	var url = document.getElementById('ham_url');
	var upload = document.getElementById('ham_upload');
	var quiz = document.getElementById('ham_quiz');
	if(isEmail(email, "Invalid Email Format"))
		if(isUrl(link, "Invalid link"))
			if(OneNotEmpty(url, upload, "Either image url or upload must be perform!"))
				if(isAllowedFileExtension(url, "Please provide an image with Gif, Png or Jpg extension Only"))
					if(isAllowedFileExtension(upload, "Please Upload Gif, Png or Jpg Images Files Only"))
						if(isSelected(month, "Please select a month"))
							if(isSelected(banner, "Please select a banner"))
								if(NotEmpty(quiz, "Please answer the quiz"))
									if(NotEmpty(name, "Please give us your name"))
									{
										return true;
									}

	return false;
}

On the other hand, you can always brings up new form validation snippets to share with me in this article. I will love to know 🙂

jQuery and JavaScript CSS !important

Everyone who is familiar with CSS !important statement understood that it means that the style have the highest priority regardless of other priority. However, !important should be avoided as much as possible and order priority should be practice in CSS instead. In jQuery, there are times when we need to change the styling of our web program but programmers usually lack of such knowledge and inquire whether !important is available for jQuery css() method. In this article, we will discuss jQuery css() and JavaScript methods in term of using !important definition.

jQuery CSS !important

One thing that everyone must have wonder (those that haven't tried yet) is whether jQuery support declaration of !important for their css() method such as this.

jQuery('#id').css('height', '200px !important');

You will find that nothing will happen with a declaration of such manipulation. If we were to try out on pure JavaScript with the above declaration, it will be something like this.

document.getElementById('id').style.height = "200px !important";

Having a pure JavaScript instruction such as this will not work in most browser other than safari 3++. Hence, jQuery will definitely won't work too. This is not a bug but something that most browser doesn't acknowledge a need since inline style already have the highest priority other than user defined ones. (unless you do not want your user to change how they view your website).

Solution to jQuery CSS !important

Well, the typical way of getting !important will not work. Rather, you might want to try CSS DOM cssText. Hence, you will force !important to your jQuery statement by doing this.

jQuery('#id').css('cssText', 'height: 200px !important');

However, most people will be unfamiliar with cssText. cssText will overwrites the css of that particular element. Hence, you will have to redeclare the rule for that particular element all over again. On the other hand, if you are using JavaScript cssText, different browser treat cssText different such as ie you will define this way,

document.getElementById('id').style.cssText = 'height: 200px !important'

While normally you will use it this way.

document.getElementById('id').cssText = 'height: 200px !important'

Definitely, there is a better alternative such as using the cssRules/rules array which can specify the rule in that element to be modify.

The other more practical way of doing it is by introducing new class for your element. Instead of styling through jQuery or DOM object which is applying inline styling (means highest priority already), you should leave every majority styling or best all of the styling to an external style sheet that help you reduce some bytes on the script and also improve maintainability for both your code and style. You can do this using the toggleClass which adds a new class to that element automatically.

jQuery('#id').toggleClass('classname');

or you can do this in JavaScript by replacing the class (this is more efficient than the jQuery one since there isn't any additional checking and stuff)

document.getElementById('id').className = 'classname';

Summary

Using !important in CSS is not advisable since it might kill your web usability. Furthermore, there is no reason why !important should be use as inline styling already has the highest priority. Hence, you might want to reconsider applying !important on your script after thinking about the consequences that might bought to your users.

The Predefined Prototype Object In JavaScript

Most of us learn JavaScript from tutorial website such as w3schools or tizag.com. However, these tutorial site only covered the most fundamental of JavaScript. Many hidden features of JavaScript are usual removed to simplify the tutorial. Although basic does bring us a long way, we still need to read more of these features eventually and improve our coding. In this article, i will cover the predefined prototype object in JavaScript. We will discuss everything we need to know about prototype object and the application in the real world.

The Prototype Object

The prototype object was introduced on JavaScript 1.1 onwards to simplify the process of adding or extending custom properties and methods to ALL instances of an object. In other word, prototype object is used to add or extend object properties or methods so every other object will also have such properties/methods. Let me show you an example. Below listed a few way to extend an object properties.

//adding a custom property to a prebuilt object
var imgObj =new Image();
imgObj.defaultHeight= "150px";

//adding a custom property to the custom object "Shape"
function Shape(){
}
var rectangle =new Shape()
rectangle.defaultColor = 'blue';

From the above example, we are able to extend properties of each object easily. However, if i create a new instances of the same object, the properties will be lost!

var newImg =new Image();
alert(newImg.defaultHeight); //return undefined 'defaultHeight';

var newRec =new Shape()
alert(newRec.defaultColor); //return undefined 'defaultColor';

This is when prototype object comes in. Prototype object is able to add the properties above and extend to other new instances object as well. Hence, the following will allowed all new instances created to contain the properties or methods attached by any previous object. We just have to add the keyword prototype between the object and name of the properties/method to use the prototype object. Using the same example above,

//adding a custom property to a prebuilt object
function check_height(){
 return typeof this.defaultHeight != 'undefined'?true:false;
}
var imgObj =new Image();
imgObj.prototype.defaultHeight= "150px";
imgObj.prototype.hasHeight= check_height;

//adding a custom property to the custom object "Shape"
function Shape(){
}
function color_checker(){
 return typeof this.defaultColor != 'undefined'?true:false;
}
var rectangle =new Shape()
rectangle.prototype.defaultColor = 'blue';
rectangle.prototype.hasColor = color_checker;

var newShape =new Shape()
alert(newShape.defaultColor) // blue
alert(newShape.hasHeight) // true

var newImg =new Image()
alert(newImg.defaultHeight) // 150px
alert(newImg.hasColor()) // true

Now every new instances of Image and Shape will have the properties and methods defined previously by the variables rectangle and imgObj.

Prototype Object Restriction

Prototype object can add or extend properties or methods to any custom object but for predefined object, only those that are created with the new keyword are allowed to use the prototype object in JavaScript. The following list some of these predefined object.

  • The date object
  • The string object
  • The Array object
  • The image object

Prototype Object is an Array

In case you haven't notice, prototype object is actually an array. From all of the above example, we are doing the following declaration to create new properties or method 

//declare a function
obj.prototype.name = function(){};
//declare a property
obj.prototype.name = variables;

Notice that we are actually associating a name with a variable or function into the prototype object. Hence, we can also declare prototype with the same way as declaring an array.

obj.prototype ={
name: variables,
name: function(){}
}

The above two methods are similar and can be declare either way. Since both ways are similar, performance wise shouldn't make any big differences.

Priority Between Prototype And Own Property

What if we have both property? If the object itself already has a prototype property and if we redeclare the exact same property again without the keyword prototype, JavaScript will take which property? The answer is own property. In JavaScript, the own property takes precedence over the prototype's. Consider the following example,

function Rectangle(w,h){
	this.area = w*h;
}
var obj = new Rectangle(2,2); //area is 4;
obj.prototype.area = 200; // now we have own and prototype 'area'
alert(obj.area); // 4 will appear instead of 200; Hence, own property takes priority first.

What happened if we delete the property?

delete obj.area
alert(obj.area); // 200 appeared!

Prototype property will take over again. Hence, we can use the Own property to overwrite prototype property defined in the object.

Identify Own and Prototype Properties

How do we identify whether the given object properties are from own or prototype? In JavaScript, there is a method hasOwnProperty which can be used to identify whether a given property is from own or prototype. Let's look at the following example,

function Rectangle(w,h){
	this.area = w*h;
	this.parameter = w+h;
}
obj.prototype.height = 5; 
obj.prototype.weight = 6; 

var obj = new Rectangle(2,2); 
obj.hasOwnProperty('area');// return true;
obj.hasOwnProperty('parameter');// return true;
obj.hasOwnProperty('height');// return false;
obj.hasOwnProperty('weight');// return false;

Inheritance Using Prototype Object

In the real world, prototype object is usually used as inheritance during OOP (Object Oriented Principle) with JavaScript. In JavaScript, we are not looking at classes inheriting other classes but object inheriting other object since everything in JavaScript is Object. Once we understand this, it will be easier for us to show inheritance example with prototype object.

function Shape(){
}
function color_checker(){
 return typeof this.defaultColor != 'undefined'?true:false;
}
function getArea(){
return this.area;
}

Shape.prototype.defaultColor = 'blue';
Shape.prototype.hasColor = color_checker;
Shape.prototype.getArea = getArea;

function Rectangle(w,h)
{
	this.area = w*h;
}

function Rectangle_getArea()
{
    alert( 'Rectangle area is = '+this.area );
}
Rectangle.prototype = new Shape();
Rectangle.prototype.constructor = Rectangle;
Rectangle.prototype.getArea  = Rectangle_getArea;

Using the custom object 'Shape' example above, i extend it so that 'Rectangle' will inherit all method and properties of 'Shape'. Inherit can be done through this sentence

Rectangle.prototype = new Shape();

'Rectangle' prototypes are assigned to the prototype of the 'Shape' through an object instance thereby "inheriting" the methods assigned to the prototype array of 'Shape'. After 'Rectangle' has inherit 'Shape', it overwrites the getArea method of 'Shape' through this statement.

Rectangle.prototype. getArea  = Rectangle_getArea;

Inheritance using prototype object can reduce a lot of unnecessary coding and make your overall code run faster. The constructor on the above code is to overwrite the way Rectangle object is being instantaneous since the Rectangle prototype was overwritten by Shape prototype on the previous statement. Hence, to create a Rectangle object, the constructor for it will be as follow

function Rectangle(w,h)

We can use the above code as follow

var recObj = new Rectangle(20, 20);
rec.getArea(); //return 'Rectangle area is = 400'
rec.hasColor(); // return true;
rec.defaultColor;//return blue;

Check Prototype Inheritance

We can check whether a particular object is another prototype object by using the function isPrototypeOf. In other word, we can check whether a particular object inherit another object properties and methods. Using the previous inheritance explanation, we can check whether Shape is inherited into Rectangle object.

var rec = new Rectangle(5,5);
Shape.isPrototypeOf(rec);// return true;

This shows that Shape is a prototype of rec object. I think the method name said it all.