JavaScript – Sibeesh Passion

Do you know JavaScript? Are you sure? – Part Two

SibeeshVenu — Sun, 05 Mar 2017 09:21:30 +0000

Here we are going to a see an anothe article of the JavaScript series. In the first part, we have see some basics that you can start with. In this article, we will be discussing about the JavaScript object continuations and constructors etc. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. If you are totally new to JavaScript, I strongly recommend you to read some basics here.I hope you will like this. Now let’s begin.

Download source code

Do you know JavaScript – Part Two

Background

This article is the second part of the series we have just started. If you haven’t read the first part yet, I stronglyh recommed you to read it here.

Setting up the platform

To get started with, here we are going to create an HTML file and JS file.

[html]

Do you know JavaScript? Are you sure? Part Two

[/html]

Let’s begin our tutorial

Now, please open your JavaScript file. We have some scripts to write.

Constructor

Have you ever created any constructor in JavaScript? Before going to create a one, it is beter to know what is the need for it. Let’s start with an example. Here I am going to create an object called bike.

[js]
var bike = {
name: "Thnuderbird",
color: "Blue",
CC: "350",
company: "Royal Enfield",
tankCapacity: "20",
abs: false,
showName: function () {
console.log(this.name);
}
};
[/js]

As you can read it, this object if holdong the common properties of my bike Royal Enfield Thunderbird. Now my question is this is the only bike you know? Absolutely no, right? So suppose you need to create an object for the brand new Bajaj Dominor? What will you do? Creating an another object? So what if you know more than 10 bikes. If your anser is creating 10 objects, that’s not fair at all. Instead, why don’t we share this common properties like name, color, cc ect…So we are going to create objects but we are not going to create the properties again. So let’s crete an object for Dominor. Before doing that, we need to create a bike construcor as follows.

[js]
function Bike(name, color, cc, company, tankCapacity, abs) {
this.name = name;
this.color = color;
this.cc = cc;
this.company = company;
this.tankCapacity = tankCapacity;
this.abs = abs;
this.showName = function () {
console.log(‘The name of the currnet bike is ‘ + this.name);
}
}
[/js]

Now we can create object for Dominor as follows. Remember, when you write the word Bike, you can see that the intellisense is shown for you as follows.

Constructor_intellisence

[js]
var dominor = new Bike("Dominor", "Black", "Bajaj", "20", true);
dominor.showName();
[/js]

Have you noticed that we have not created the function showName in the object dominor but in Bike, and we are still able to use that in the object dominor. And you can see an output as preceding in your browser console.

Dominor_object_output

And you can create an object for Royal Enfield Thunderbird as follows.

[js]
var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);
thunderbird.showName();
[/js]

Thunderbird_output

Distinguish between own and inherited properties

As the heading implies, we have two kind of properties, own and inherited. Let’s create an example to understand that.

[js]
var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);
thunderbird.isMine = true;

console.log(dominor.name + " is yours or not? ");
console.log("isMine" in dominor);
console.log(thunderbird.name + " is yours or not? ");
console.log("isMine" in thunderbird);
console.log("toString" in dominor);
console.log("toString" in thunderbird);
[/js]

Before runningit, Can you please guess what will be the output of the above coce block? If you find the answer, check whether your answer matches the below output.

Own_and_inherited_properties

So isMine is the property that we jsut added to the object thunderbird, and the same is not available in the object dominor. That’s cool. But why the property toString is available in both object, we have not added that to our object right? This is because toString method is being inherited from the Object.prototype.

Use of hasOwnProperty

In the above code, we have just seen how to check any property is available in our object, but that doesn’t mean it is its own property right? To check that, we can use the hasOwnProperty. Let’s find out how to use it now.

[js]
console.log(dominor.name + " is yours or not? ");
console.log(dominor.hasOwnProperty("isMine"));
console.log(thunderbird.name + " is yours or not? ");
console.log(thunderbird.hasOwnProperty("isMine"));
console.log(dominor.hasOwnProperty("toString"));
console.log(thunderbird.hasOwnProperty("toString"));
[/js]

Once again, please try to answer it your own, before you run it.

hasOwnProperty_output

Looping through the object

To loopthrough the each items in an object, you can use for loop as follow.

[js]
for (var itm in thunderbird) {
console.log(itm);
}
[/js]

This is not the preffered way as we have not checked for hasOwnProperties, we are suppose to iterate only the properties which is its own.

Looping_through_the_items_in_an_Object

So let’s rewrite the above code as follows.

[js]
for (var itm in thunderbird) {
if (thunderbird.hasOwnProperty(itm)) {
console.log(itm + ":" + thunderbird[itm]);
}
}
[/js]

Here is the output.

Iteration_with_hasOwnProperty

We have seen enough about objects right? Any idea how you can delete the property from an object?

[js]
delete thunderbird.isMine;
for (var itm in thunderbird) {
if (thunderbird.hasOwnProperty(itm)) {
console.log(itm + ":" + thunderbird[itm]);
}
}
[/js]

Delete_from_an_object

Now it is time for a question. What would be the output of the preceding code?

[js]
console.log(delete thunderbird.toString);
[/js]

It will return true, now run it again. What is the output? Again true? This is because of, toString is an inherited property so it won’t get deleted. So thunderbird.toString will always give you output.

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

See also

Articles related to JavaScript

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Do you know JavaScript? Are you sure? – Part 1

SibeeshVenu — Tue, 28 Feb 2017 17:22:18 +0000

[toc]

Introduction

Here we are going to a series of articles related to JavaScript. As this is the first part of the series, here we are going to see some basics of JavaScript which you may forgot or you may not be aware of it. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. Basically, JavaScript is a programming language of HTML and Web. Now a days we can create any kind of applications using JavaScript. If you are totally new to JavaScript, I strongly recommend you to read some basics here. I hope you will like this. Now let’s begin.

Download source code

You can always download the source code from here Do you know JavaScript – Part 1

Background

Recently I was assigned to a training task where I need to train one of my colleague who is a fresher and totally new to programming field. I had covered almost all the topics in my training and I am sharing few of them here. I hope you will like this.

Using the code

Create a HTML page

As we already said, JavaScript is a programming language of HTML and Web, we need a page to work with JavaScript. Let’s create it first.

[html]

[/html]

Now create a JS file and include it in your page.

[js]

[/js]

Let’s begin our tutorial

Any idea, what will be the output of the preceding lines of code.

[js]
console.log(2 + 2);
console.log(2 + “2”);
console.log(2 + “2” + 2);
console.log(2 + 2 + “2” + 2);
console.log(2 + 2 + “2” + 2 + 2);
console.log(2 + “2” + 2 + “2” + 2 + 2);
console.log(“2” + 2 + “2” + 2 + 2 + 2 + 2);
[/js]

Once after you run your application, press CTRL+SHIFT+J if you are opening your application in Google chrome or CTRL+SHIFT+K if it is Mozilla, or press F12 if in IE. This will open the browser console. Now check the output, is it the same as you thought?

Javascript_tutorial_output_1

If you noticed well, console.log(2 + 2 + “2” + 2 + 2); returned 4222. First twos are added and when it comes to the third digit, the type of the result is being changed to string, so the string concatenation is happening. This is because of the dynamica nature of JavaScript.

So you can always add different types of values to the same variable in JavaScript. The preceding codes will always be working perfect.

[js]
var a = 1;
a = “Sibeesh”;
[/js]

Now a simple test, what will be the output of the preceding code?

[js]
var b;
console.log(b);
[/js]

Yes you are right it will return undefined as we have not assigned any values to the variable b. Have you ever checked the typeof an undefined variable?

[js]
console.log(typeof(b));
[/js]

The result will be undefined. Now what about the preceding codes?

[js]
console.log(typeof(undefined));
console.log(typeof(typeof(b)));
console.log(typeof(String(b)));
console.log(typeof({a:b}));
console.log(typeof(null));
[/js]

It can give you an output as below.

[js]
undefined
string
string
object
object
[/js]

Here one thing to be noted is, typeof(typeof()) will always return string. And {a:b}, null is actually objects so the typeof will return the type as object. Let’s write a simple program now.

[js]
var a=1;
var b=a;
a=2;

console.log(b);
console.log(a);
[/js]

See, how simple it was. Any idea what would be the output of that? If your answer is 1 & 2, then you are right? Have you ever thought why is that? This is why the variable we just created are primitive types. In primitive data types the values are saved directly on the variable. If you are coming from the backgound of C#, you can understand the value typed variable.

Now we have one more data type which is referenced variable where values are stored as a reference not a direct values. An example for a referenced type variable is Object. Let’s go on to the next topic which is overview on JavaScript Objects, Do you know how to create an object?

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
console.log(myName);
console.log(JSON.stringify(myName));
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Here myName is an object. You can always use JSON.stringify() to make your object to a string format and JSON.parse() to make your string to object. So the above code will give you an output as follows.

Javascript_tutorial_output_2

An object is a collection of key-value pairs, like we see in the above object, firstName is key and “Sibeesh” is value. How can we take any values from an object? We can always access a property from an object using dot(.) operator as follows.

[js]
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

And also using a bracket ([)

[js]
console.log(myName[“firstName”]);
console.log(myName[“lastName”]);
[/js]

The above codes will give you an output as “Sibeesh” “Venu”, right? We just accesses a property from an object. Now we have given string value to our object as a key? Is there anyway we can give a key in number format? Let’s have a look.

[js]
var myName = {1: “Sibeesh”, 2: “Venu”};
[/js]

The question is, how can we access values of the keys 1 & 2? Like below?

[js]
console.log(myName.1);
console.log(myName.2);
[/js]

If you said “Yes”, you are wrong. If you try to accecc the values as above, This will throw an “Uncaught SyntaxError” error, so how can we access it?

[js]
console.log(myName[“1”]);
console.log(myName[“2”]);
[/js]

So when the key value is a number, we must use [] for accessing the values. Now Lets go back to the previous object.

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
var myNameCopy= myName;
myName.firstName = “Sibi”;

console.log(myName.firstName);
console.log(myNameCopy.firstName);
[/js]

Any idea what will be the output of the above code? Have you just said Sibi Sibeesh? Oh, man. You got confused. The actual output is Sibi Sibi. As we said earlier, an object is an example of referenced type variable where the values are stored as a reference to it. So even if change the value of our first object, that will reflect is our second one too.

In the above examples we have created objects like below

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
[/js]

This way of careating an object is called Object literals. Now the questuion is, is this the only way of creating the object? There is one more way, which is known as Object Constructor. Now we can create the same objects in Object constructor way.

[js]
var myName = new Object();
myName.firstName = “Sibeesh”
myName.lastName = “Venu”;
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Is there any rule that we can add only varibles to an object? Absolutely no, an object can hold a function too. Let’s create an object with a function inside.

[js]
var myName = {
firstName: “Sibeesh”,
lastName: “Venu”,
myFullName: function(){
console.log(myName.firstName+” “+myName.lastName);
}
};
[/js]

So the code myName.myFullName(); will return my full name “Sibeesh Venu” as output. Right? So from the above code, we can create a functions in JavaScript as follows?

[js]
var myFullName = function(firstName, lastName){
return firstName + ” ” + lastName;
}
[/js]

If you call the above fucntion as preceding, you will get an output as “Sibeesh Venu”

[js]
console.log(myFullName(“Sibeesh”,”Venu”));
[/js]

The question is, what if we are passing only one values? Let’s try that out.

[js]
console.log(myFullName(“Sibeesh”));
[/js]

If you are working in any server side languages, this will actually give an error like “fucntion with one parameter couldn’t find”. But JavaScript is not like that, even if you are wrong, it will try to make you are right. So in this case, it actually treat the second parameter as undefined and give you an output as “Sibeesh undefined”.

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Writing JavaScript Tests Using Jasmine Framework

SibeeshVenu — Mon, 10 Oct 2016 00:00:33 +0000

[toc]

Introduction

In this post we will see how we can write unit test cases in JavaScript. Here we are going to use a framework called Jasmine to write and test our unit test cases. Jasmine is a behavior driven development framework to test our JavaScript codes. The interesting things about Jasmine framework are, it doesn’t even require a DOM, independent on any framework, clean and easy. Here I will show you how we can create and run our JavaScript tests. I am going to use Visual Studio 2015 for the development. I hope you will like this article.

Download source code

JavaScript Tests With Jasmine

Background

As a developer, we all writes JavaScript codes for our client side developments. Am I right? It is more important to check whether the codes we have written works well. So for that we developer usually do unit testing, few developers are doing a manual testing to just check whether the functionality is working or not. But most of the MNC’s has set of rules to be followed while developing any functionalities, one of them is writing test cases, once the test cases passes, then only you will be allowed to move your codes to other environments. Here I will show you how we can write client side test cases with the help of a framework called Jasmine.

Setting up the project

To get started, please create an empty project in your Visual Studio.

empty_project

Now, we will install jQuery, jQueryUI from Nuget package manager.

nuget_package_manager

We are all set to start our coding now.

Creating page and needed JS file

Next, we are going to create a page as preceding, with two text boxes and needed references.

[html]

Writing JavaScript test cases with Jasmine framework – Sibeesh Passion

Start Date:
End Date:

[/html]

Now we can start writing our JavaScript codes in the file Index.js. We will start with a document ready function as preceding.

[js]
$(function () {
$(“#dtStartDate”).datepicker();
$(“#dtEndDate”).datepicker();
$(“#dtEndDate”).on(“change leave”, function () {
});
});
[/js]

Shall we create our validation functions? We will be creating a namespace indexPage and functions. You can see the validations below.

[js]
var indexPage = {};
indexPage.validationFunctions = (function () {
return {
getStartDateSelectedValue: function () {
return $(“#dtStartDate”).val();
},
getEndDateSelectedValue: function () {
return $(“#dtEndDate”).val();
},
isNullValue: function (selVal) {
if (selVal.trim() == “”) {
return true;
}
else {
return false;
}
},
isNullValueWithUIElements: function () {
if (indexPage.validationFunctions.isNullValue(indexPage.validationFunctions.getStartDateSelectedValue())
&& indexPage.validationFunctions.isNullValue(indexPage.validationFunctions.getEndDateSelectedValue())) {
alert(“The values can’t be null!.”);
}
},
isEndDateGreaterStart: function () {
var startDate = new Date(indexPage.validationFunctions.getStartDateSelectedValue());
var endDate = new Date(indexPage.validationFunctions.getEndDateSelectedValue());
if (startDate < endDate) {
return true;
}
else {
alert(“End date must be greater than start date!.”)
return false;
}
}
}
}(jQuery));
[/js]

Hope you are able t understand the codes written. We are wrote some validations like Null value check, end date greater than start date etc…

Now please run your application and check whether the validations are working fine.

null_validation_check

date_validation_check

Now, here comes the real part.

Setting up Jasmine Framework

To set Jasmine, we will add a new project to our solution.

add_new_project

Now install Jasmine from Nuget Package manager.

jasmine_nuget_package

Once you are done, the required files would be added to your project. We will be discussing about Jasmine once everything is set. So no worries.

Now please add a new HTML file on your Jasmine project, this is the page where we can see the test cases in actions, and add all the references as follows.

[html]

Jasmine Spec Runner – Sibeesh Passion

[/html]

Please do not forget to include the js files where we actually written the validations, jquery, jqueryui (if needed). Here indextests.js is the file where we are going to write the test cases.

Normally this page is called as Spec Runner, Now you may be thinking what is a Spec? Before going further, there are some terms you must be aware of, there are listed below.

Suites

A suit is the starting point of a Jasmine test cases, it actually calls the global jasmine function describe. It can have two parameters, a string value which describes the suit, and a function which implements the suit.

Spec

Like suites, a spec starts with a string which can be the title of the suit and a function where we write the tests. A spec can contain one or more expectation that test the state of our code.

Expectation

Value of an expectation is either true or false, an expectation starts with the function expect. It takes a value and call the actual one.

You can always read more here. Now please run your SpecRunner.html page. If everything is fine you can see a page as below.

jasmine_spec_runner_page

So are you all set? Shall we go and write our test cases? Please go to your IndexTest.js file and create a suit and spec as preceding.

[js]
describe(“Includes validations for index page”, function () {
var indexPage;
beforeEach(function () {
indexPage = window.indexPage.validationFunctions;
});

it(“Check for null values”, function () {
// We are going to pass “” (null) value to the function
var retVal = indexPage.isNullValue(“”);
expect(retVal).toBeTruthy();
});

});
[/js]

Here the expectation is true and we give toBeTruthy(), now lets go and find whether the test is passed or not. Please run the SpecRunner.html page again.

test_jasmine_specs

Now we will write test case for our function isEndDateGreaterStart, if you have noticed the function isEndDateGreaterStart, you can see that there are dependencies (UI elements). Inside of the function, we are getting the values from the UI elements.

[js]
var startDate = new Date(indexPage.validationFunctions.getStartDateSelectedValue());
var endDate = new Date(indexPage.validationFunctions.getEndDateSelectedValue());
[/js]

So in this case, we need to mock this values. It is known as ‘Spy’ in Jasmine. We can use a function called SpyOn for this.

[js]
it(“Spy call for datepicker date validation”, function () {
//Start date as 2015-03-25
spyOn(indexPage, “getStartDateSelectedValue”).and.returnValue(“2015-03-25”);
//End date as 2015-03-24
spyOn(indexPage, “getEndDateSelectedValue”).and.returnValue(“2015-03-24”);
var retVal = indexPage.isEndDateGreaterStart();
expect(retVal).toBeFalsy();
});
[/js]

Here we are giving start date as 2015-03-25 and end date as 2015-03-24 and we know 2015-03-25 < 2015-03-24 is false, so here we are giving expectation as false (toBeFalsy()). Now you are getting an alert as follows right?

alert_in_spyon_jasmine

But in testing framework we don’t need any alerts right? To get rid of this, you must create a spy for window.alert function and add it to the beforeEach so that it can be used for each specs. You can do that as follows.

[js]
window.alert = jasmine.createSpy(“alert”).and.callFake(function () { });
[/js]

Once after you add this code, alert message won’t be thrown. Now please add an another spec with true values (Start date – 2015-03-25, End date – 2015-03-26), so that it will return true.

[js]
it(“Spy call for datepicker date validation toBeTruthy”, function () {
//Start date as 2015-03-25
spyOn(indexPage, “getStartDateSelectedValue”).and.returnValue(“2015-03-25”);
//End date as 2015-03-26
spyOn(indexPage, “getEndDateSelectedValue”).and.returnValue(“2015-03-26”);
var retVal = indexPage.isEndDateGreaterStart();
expect(retVal).toBeTruthy();
});
[/js]

Now you can see all of your specs are passed.

run_all_specs_in_jasmine

Happy coding!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Programmatically Change The Element Or Page Into Full Screen Mode

SibeeshVenu — Mon, 07 Mar 2016 00:00:49 +0000

In this article we are going to see how we can change any element or any page into full screen mode programmatically. To do this requirement we are going to use client side API requestFullscreen . To make it compatible to all the browsers, we will be using separate API calls for each browsers. By using requestFullscreen , you can easily make the items to be viewable in a full screen mode. That’s cool right? You can use Video’s, Audio’s, Images, Pages or anything. Now shall we go and see this in detail? I hope you will like this.

Download the source code

You can always download the source code here:

Programmatically Change The Element Or Page Into Full Screen Mode

Background

Yesterday I have got a requirement to do the full screen option programmatically in one of my application, I was required to open a chart, which is already being loaded to a page, in full screen mode. I have done that with the help of full screen API. Here I am going to show you that. Now we will start our coding. I hope you will enjoy reading.

Create an Empty Website in Visual Studio

Click File-> New-> Web Site.

Empty Website In Visual Studio

Create a new HTML page

Now create a new page, start coding.

[html]

Programmatically Change The Element Or Page Into Full Screen Mode

[/html]

Using The Code

We will be using pure JavaScript code to do this requirement. Firs of all create the container element and one other element in which we can fire the full screen function in on click event.

[html]

[/html]

Here changeToFullScreen() is the function which does the task.

[js]

[/js]

Now if you run your page in Google Chrome and fire the function, you will be given an output as preceding.

Chnage_Element_To_Full_Screen_In_Google_Chrome_Error

As you can see that the window is opened in full screen, but not the element. To fix this, you must add a custom CSS style as follows. This is a hot fix which is applicable only to Google Chrome.

[css]
#container:-webkit-full-screen {
width: 100%;
height: 100%;
}
[/css]

Now run your page again, and make sure the fix is applied.

Chnage_Element_To_Full_Screen_In_Google_Chrome

Now if you want to escape from full screen whenever user press any keys, you can do that too. You can add a new function as follows.

[js]
function changeToFullScreenOnKeyPress() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
[/js]

And you can call this function in keydown event as preceding.

[js]
document.addEventListener("keydown", function (e) {
changeToFullScreenOnKeyPress();
}, false);
[/js]

Run your page again and notice that the full screen is getting escaped whenever you press any keys.

Complete Code

[html]

Programmatically Change The Element Or Page Into Full Screen Mode

[/html]

Here msRequestFullscreen, mozRequestFullScreen, webkitRequestFullscreen is for Internet Explorer, Mozilla Firefox, Google Chrome respectively.

We have done everything needed, Now it is time to see the output.

Output

Chnage_Element_To_Full_Screen_Click

Chnage_Element_To_Full_Screen_Output

Have a happy coding.

References

Fullscreen_API

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Hoisting In JavaScript

SibeeshVenu — Fri, 06 Nov 2015 12:19:21 +0000

In this post we will discuss the importance and limitations of Hoisting in JavaScript. We all writes client side codes. Right? But few of you might not be aware of the term Hoisting. Hoisting is one of the default behaviour of JavaScript, it is the process of moving all the declarations of the variables to the top of the current function or scope. In this post we will explain this Hoisting in detail with some examples. I hope you will like this.

Background

I used to spend more time with the client side codes rather than server side codes. In my thought is is always good if you do the formation of your data in client side instead doing it in the server side. Client side loops are always faster than the server side ones. As a client side code developer, you must understand the word Hoisting in JavaScript. Here we will discuss that.

Using the code

Before going through we need to know some facts in JavaScript.

Do you know?

In JavaScript we can use any variable before it is declared or a variable can be declared after it is used.

For Example:

The below two scripts will return same output.

[js]

[/js]

And

[js]

[/js]

Limitations of Hoisting

Even though the process of Hosting will move the declarations to the top, there is some limitations too. We will discuss it here now.

Initializing a variable can not be Hoisted or In simple JavaScript Hoists declarations not initializations.

For Example:

The below scripts will give different outputs.

[js]

[/js]

This will give you an output of 6.

And

[js]

[/js]

This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.

So the second example is same as of below.

[js]

[/js]

This will give you an output of NaN.

Hoisting In JavaScript

Conclusion

Since we are all developers, it is always makes things simple. So much complexity in software comes from trying to make one thing do two things. So always declare your variables on top of your function or scope. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Regex to remove a word from a string

SibeeshVenu — Mon, 02 Nov 2015 10:13:52 +0000

In this post we will see how we can remove a particular word from a string entirely in jQuery.

[js]
var newString= oldString.replace(/Unspecified/g, ”);
[/js]

Here I am removing the word Unspecified from my variable oldString.

Please see my other posts related to JQuery here: JQuery Posts

Kindest Regards
Sibeesh Venu

Load Data To Grid On Sroll

SibeeshVenu — Mon, 02 Nov 2015 06:09:36 +0000

In this post we will discuss about how we can load data to a grid on scroll event. As you all know Grid is a main control in every dashboard. Every company uses a grid control for showing reports or any kind of data. Hence it is widely used, it is important that the grid must be loaded faster. So the performance of the grid control matters a lot. Isn’t it? Here in this post we are going to do a task which will increase the performance of the grid since we are going to load the data as per user request (on scrolling down). Sounds cool?. Normally what we do is, we will load all the data to the grid in a head shot, the problem in this manner is, it will take ages to load the full data to grid. Hence the user will close your application and the won’t return back. That is sad thing right? So we will concentrate on the performance part now. I hope you will like this.

Background

I am working in a dashboard application. So for me performance was the main criteria to take care. We have used server side paging to improve the performance. This I will share in my next article. Now we will try to load a client side data on demand. Let us say when ever user scroll down. Sounds fine? Ok let us start then.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Add the needed references

[html]

[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]

[/js]

As you can find out in the above code we are generating the data dynamically using a function declaration generatedata.

Have you noticed that in the grid settings we have given virtualmode: true. This is very important. This property is meant to be used for handling the dynamic data in grid.

And another property you must be aware of is rendergridrows: rendergridrows. This means, we are rendering the grid data on demand. Like when user change the pager or scroll. So we are going to call our generatedata function in the rendergridrows. We are passing the start index and end index to the function, so that the dynamic data won’t be repeated.

[js]
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
[/js]

Once the data is ready, we will pass it to the source object and source object to dataAdapter and finally dataAdapter to grid.

Shall we check our output now?

Output

Load Data On Scroll

Complete Code

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Function Declaration And Function Expression

SibeeshVenu — Wed, 21 Oct 2015 00:59:00 +0000

In this post we will see the basic difference between function declaration and function expression in jQuery and JavaScript. Sometimes the developer’s getting confused between these two topics(Shhhh I ma saying about the starters like me). Basically both are same. Only difference is depends on how you handle or treat these two. We will see a basic demo here to ensure the difference between function declaration and expression. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

In my projects I am using both function declarations and function expressions. So I thought to highlight some basic difference between them, so that it may help someone.

Basic Difference Between Function Declaration And Function Definition

Function declarations are loaded first, that is before any codes

Function expressions are loaded when the interpreter reaches that particular line of code.

Basically we can call any code only after the declarations are loaded

We will try to find out this difference with a demo.

Using the code

First thing you need to do is create a page.

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

Now we will create a function declaration as follows.

[js]

[/js]

What will be the output of this?

Function Declaration And Function Expression

Now we will change our script as follows.

[js]

[/js]

This will also returns the same output.

Function Declaration And Function Expression

Now we will create a function expression as follows.

[js]

[/js]

What may be the output of this? We will check it now.

Function Declaration And Function Expression

As you can see, instead of giving an alert it is throwing an error Uncaught TypeError: myFunctionExpression is not a function in the console. It is just because the function expression is not yet loaded. You are trying to call that expression before it loads.

So what we can do to make it work? Simple, just change the script as follows.

[js]

[/js]

Now you will get an alert as follows.

Function Declaration And Function Expression

That is all. I hope you know the difference between function declaration and function expression now.

Complete Code

[html]

Function Declaration VS Expression – Sibeesh Passion

Function Declaration VS Expression – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

jQuery no-conflict And Using Different Versions Of JQuery

SibeeshVenu — Mon, 12 Oct 2015 12:03:11 +0000

In this post we will see what is jQuery no-conflict and what is the importance of jQuery no-conflict. We will also learn how can we use different versions of JQuery in the same page according to your need. jQuery no-conflict is an option given by the jQuery to over come the conflicts between the different js frameworks or libraries. When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assign to jQuery. Here in this post we will explain this feature in deep and we will also create a demo of using different versions of jQuery together in one page. I hope you will like this.

Download Source Code

Please download the source code here: jQuery noConflict

Introduction

As you all know, some other JavaScript libraries also uses the $ (Which is the default reference of jQuery) as a function or variable name as jQuery has. And in our development life, we are not at all strict to only jQuery, we may use lots of other libraries too. Isn’t it? I use different libraries in my projects to accomplish different tasks. So what will happen when we use those libraries? There will be conflicts between those libraries right since they all use $ as the variable name. The situation is really bad.

So we have only one chocolate and more number of winners, in real life we can just cut the chocolate into the number of winners, right?

Dogs Sharing Food

But that won’t be accepted in this case, so we have an another option, this option is introduced by jQuery and it is jQuery no-conflict.

Background

I always use different libraries in my project, thus sometimes I faced these problem in my project. So I thought of sharing with you all who are facing this problem.

Using the code

The first thing you want to do is creating an HTML page.

[html]

JQuery noConflict – Sibeesh Passion

JQuery noConflict – Sibeesh Passion

[/html]

So what is next? Adding reference ? Yes.

[js]

[/js]

So we are using prototype lowest version and jquery together, in this case you will face conflict errors, and please be noted that the new version of prototype.js doesn’t have any conflict with jQuery since they updated and given the fix.

So what to do if you found any issues? you just need to give the $ to prototype and assign a new variable to jquery as follows.

[js]

[/js]

And now you can use $jq as the new jQuery reference.

[js]

[/js]

Complete Code

[html]

JQuery noConflict – Sibeesh Passion

JQuery noConflict – Sibeesh Passion

[/html]

Sometimes we may end up in a situation to use different version of jQuery in the same page right?

Situation I faced

I was working in an old project which was handled by a team few years back, at that time I got a minor work to do in that project, to do the task I was in a need to add the latest version of jQuery since the entire project was using the old reference of jQuery. I was in a situation that I should not remove the old references and update with the new one, if I do that there might be some issues with other functionalities right? Since the project was already in live, I didn’t take that risk. So I added the new version and used jQuery noConflict to avoid the reference issues.

Using the code

Here I am going to give you a demo of now to use different version of jQuery in one page.

First of all please add the needed reference to your page.

[js]

[/js]

Please be noted that we have added jQuery 1.9.0,1.10.1,1.11.0,1.11.1,1.11.3 in our page.

Now we need to add some buttons in the UI, later we will bind the click events of the same buttons.

[html]

[/html]

What is next, so we have added the different jQuery versions. Now we will create different variable names for each versions. Is that fine?

[js]

[/js]

So now we have added variable names for all the versions right? The next thing we are going to do is to fire the click events for each versions.

[js]

[/js]

So if you run your page and click the buttons, you can find that the related codes only get fired.

jQuery no-conflict And Using Different Versions Of JQuery

Now what if you comment out the variable declaration for jQuery version 1.11.3?

[js]
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;
[/js]

You will get an error says Uncaught ReferenceError: jQuery1113 is not defined in browser console.

jQuery no-conflict And Using Different Versions Of JQuery

Complete Code

[html]

Use JQuery Different Versions in One Page – Sibeesh Passion

Use JQuery Different Versions in One Page

[/html]

That’s all.

Conclusion

Did I miss anything that you may think which is needed? Have you ever used different versions of jQuery in same page? Have you ever tried jQuery noConflict? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

A Drag And Drop Game

SibeeshVenu — Thu, 20 Aug 2015 10:12:02 +0000

[toc]

Introduction

In this post, we will create a drag and drop game which uses jquery drag drop functions. We will create two boxes, from one box we need to drag the content box and drop the same into another box. We will be using sortable function and its events. I hope you will like this game.

Background

For the last Independence day for India, I though to create a game related to the word “INDIA”. I created and hosted it in my website.

Using the code

First we will create an html5 page as follows.

[html]

Find INDIA Game – Sibeesh Passion

[/html]

And now we will set style to the body. To set the background image fit to the screen we will use the following styles.

[css]
#body {
background: url(“http://sibeeshpassion.com/content/images/indian%20flag%20banner.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/css]

Now we can see page as follows.

Make Image Fit To The Screen

Since we are going to create a client side game, it is necessary to load the jquery and jquery ui reference.

[js]

[/js]

Next we will create the drag able contents as follows.

[html]

[/html]

Now we need to set a div where we can drag contents to it.

[html]

[/html]

As it is a game, we must set the game rules also right?

[html]

Find “INDIA” Game Rules

You can drag and drop any boxes.

We have set each letters from “INDIA” in the boxes. It is hidden

The game is, you need to find out the letters of “INDIA” by drag and drop the boxes to nearest box

Let us play the game now…

[/html]

And we will set some styles to those elements.

[css]
.dropDiv {
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 10px;
display: inline;
position: absolute;
margin-left: 5px;
min-height: 265px;
}

.dragDiv {
border: 1px solid #ccc;
width: 27%;
height: auto;
padding: 10px;
float: left;
margin-left: 5px;
min-height: 265px;
}

#parent {
/*border: 1px solid #ccc;*/
height: 307px;
width: 70%;
padding: 20px;
}

.droppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: green;
margin: 3px;
float: left;
cursor: move;
}

.Notdroppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: red;
margin: 3px;
float: left;
}

#countdiv {
margin-top: 10px;
float: left;
}

#gamerules {
border: 1px solid #ccc;
width: 250px;
height: 280px;
padding: 5px;
float: right;
margin-left: 5px;
}

.caption {
list-style: none;
color: green;
padding: 5px;
font-weight: bold;
}
[/css]

So our page will look like as follows.

Drag And Drop Game

The next thing what we need to do is adding sortable functionality using jquery sortable to the div which has class as dropDiv.

[js]
$(“.dropDiv”).sortable({
connectWith: ‘.dropDiv’,
forcePlaceholderSize: true,
forceHelperSize: true,
opacity: 0.60,
placeholder: ‘placeholder’,
tolerance: ‘touch’,
scroll: false,
cancel: ‘.dropDiv’,
start: function (event, ui) {
},
stop: function (event, ui) {
},
update: function (event, ui) {
},
receive: function (event, ui) {
}
});
[/js]

Please be noted that we have given connectWith property as follows to make the drag able div to be dropped only in the div which has class as dropDiv.

[js]
connectWith: ‘.dropDiv’
[/js]

We have also set the property cancel as follows to make the dropped div not drag able from dropDiv.

[js]
cancel: ‘.dropDiv’,
[/js]

Next we will set draggable for our inner divs.

[js]
$(‘.Notdroppable,.droppable’).draggable({
connectToSortable: ‘.dropDiv’,
containment: “#dropDiv”,
helper: ‘clone’,
revert: ‘invalid’
});
[/js]

Game Insights

As you can see in the html of the our dragDiv, we have set an attribute myval for some of the div. So what we are going to do is when a user drags a div we will check whether that particular div has that attribute and if it has, user got one letter. In this way user needs to collect 5 letters from the dragDiv.

So in the stop function of sortable we will write some scripts as follows.

[js]
stop: function (event, ui) {
++count;
if (ui.item.attr(‘myval’)) {
$(‘#draggedContent’).show().append(ui.item.attr(‘myval’));
}
$(“.dragDiv div[myid=” + ui.item.attr(‘myid’) + “]”).remove();
var res = maxTrial – count;
if (res == 0) {
$(‘#countdiv’).show().html(‘Sorry, you have no more chances left!!!. Please refresh to start the game again’);
$(‘.dragDiv .droppable, .dragDiv .Notdroppable’).remove();
} else {
$(‘#countdiv’).show().html(‘You still have ‘ + res + ‘ tries’);
}
$(‘.dropDiv .droppable, .dropDiv .Notdroppable’).remove();
if ($(‘#draggedContent’).html().length == 5) {
alert(‘You have won the game!!!. Please collect the prize from somewhere ;)’);
$(‘#countdiv’).show().html(‘You have won the game!!!. Please collect the prize from somewhere ;)!. Please refresh to start the game again’);
$(‘.dragDiv .droppable, .dragDiv .Notdroppable’).remove();
}

}
[/js]

We are checking whether the inner div has a particular attribute as follows and once we find it, we are removing that from dragDiv.

[js]
if (ui.item.attr(‘myval’)) {
$(‘#draggedContent’).show().append(ui.item.attr(‘myval’));
}
$(“.dragDiv div[myid=” + ui.item.attr(‘myid’) + “]”).remove();
[/js]

If a user has already got those five letters, we must alert the user right? We will do this validation in stop function.

[js]
start: function (event, ui) {
if (count > maxTrial) {
$(‘#countdiv’).show().html(‘Sorry, you have no more chances left!!!. Please refresh to start the game again’);
} else {

}
}
[/js]

Drag And Drop Game

If there is no chances left, user will get a message as follows.

Drag And Drop Game

Now what we need to do next? Yes we need to shuffle div contents or elese user may find it easy when the tiles are in same order and in same place.

To shuffle the divs dynamically we will add some scripts as follows.

[js]
var parent = $(“#dragDivInner”);
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
[/js]

Next we will disable the right click and mouse events as follows.

[js]
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
$(document).on(“contextmenu”, function (e) {
return false;
});
[/js]

We will also disable the F12 key of keyboard.

[js]
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
[/js]

As every game has some settings, we will also give some settings.

[html]

Select Game Level :

[/html]

And in the drop down option change we will decrease the maximum trials allowed.

[js]
$(“#selectGameLevel”).change(function (e) {
var selected = $(“#selectGameLevel option:selected”).val();
if (selected == “Easy”) {
maxTrial = 25;
} else if (selected == “Medium”) {
maxTrial = 15;
} else if (selected == “Hard”) {
maxTrial = 10;
}
});
[/js]

So our complete page will look like this.

Drag And Drop Game

Our complete code is as follows.

Complete Code

[html]

Find INDIA Game – Sibeesh Passion

Select Game Level :

Find “INDIA” Game Rules

You can drag and drop any boxes.

We have set each letters from “INDIA” in the boxes. It is hidden

The game is, you need to find out the letters of “INDIA” by drag and drop the boxes to nearest box

Let us play the game now…

[/html]

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu