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

Custom Pager Using prev and next In jQuery

SibeeshVenu — Wed, 21 Oct 2015 10:44:24 +0000

In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create an jQuery ajax call and fetch the data from the database and show. You need to know the basic of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you can not find more functionalities here.

Using the code

First thing you need to do is create a page.

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Then we will apply some CSS, so that it will look nice.

[css]

[/css]

Now add jQuery reference.

[js]

[/js]

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

[js]

[/js]

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/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

Check whether an array contains a particular element

SibeeshVenu — Tue, 30 Jun 2015 06:23:21 +0000

Introduction

Hi All, How are you today? In this article we will see how we can check whether an array element is present in an array. We will be using JQuery to do this requirement. I hope you will like it.

Background

I know we all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. In that case, you will be using client side arrays too. So if you use client side arrays,sometimes you may need to check the array contains a particular element or not.Then only you can do some codes according to that. Here I am going to give you a demo of how we can do this requirement.

Using the code

To start with, as you all know we need to load the JQuery reference.

[js]

[/js]

Once you load the reference you are ready to go.

Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.

Add the elements to the array

Check the elements are added or not

Search an element

Shall we start then?

Add the elements to the array

We need to set our UI first right?

[html]

Check whether an array contains a particular element – Sibeesh Passion

	Add Me
Show Array Length	Array length is
	Search Me	The given text

[/html]

So we have set our UI, and now if you run your page you can see output as follows.

Now we will add the needful scripts.

[js]

[/js]

As you can see we are adding elements to the array, checking the array element in the first two click functions. But what about the third click function. Bingo! there we are using jQuery.inArray function to check our element is present in the array or not.

No we will learn little about the jQuery.inArray function.

jQuery.inArray

It is used for searching a specified value within an array

It returns -1 if it does not contain the searched value

It returns index of the searched value if it contains the value

The following code block describes how we can use jQuery.inArray

[js]
if (jQuery.inArray($("#searchText").val(), myArray) > -1)
$("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");
else
$("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");

[/js]

Complete Code

[html]

Check whether an array contains a particular element – Sibeesh Passion

	Add Me
Show Array Length	Array length is
	Search Me	The given text

[/html]

Now we will run our page and see the output.

Output

That is all.

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu

Basic DOM Manipulation in JavaScript

SibeeshVenu — Thu, 29 Jan 2015 19:44:34 +0000

Introduction

We are all familiar with JavaScript. This article is for those who have not touched JavaScript yet. Here I will tell you how to do simple DOM manipulations in JavaScript.

Creation

If you want to create a new element in the DOM, you can do as follows:
[js]
Var myDiv = document.createElement(‘div’);
[/js]
Addition

If you want to add a new element to the existing element, you can do as follows.
[js]
document.body.appendChild(div);
[/js]
Here I am appending a div to the body.

Style manipulation

If you want to add some styles to an existing element, you can do as follows.

Positioning
[js]
div.style.right = ‘142px’;
div.style.left = ’26px’;
Modification
[/js]
Using classes:

If you want to assign a class name to an existing element, you can do as follows:
[js]
div.className = ‘myClassName’;
[/js]
Using ID:
[js]
div.id = ‘myID’;
[/js]
Change the contents

using HTML:
[js]
div.innerHTML = ‘

This is my HTML

’;
[/js]
using text:
[js]
div.textContent = ‘This is my text’;
[/js]
Removal

To remove an element from the DOM:
[js]
div.parentNode.removeChild(div);
[/js]
Here we are removing a div from the parent node.

Accessing

We can access the elements in several ways. Let us see that now.

ID
[js]
document.getElementById(‘myID’);
[/js]
Tags
[js]
document.getElementsByTagName(‘p’);
[/js]
Class
[js]
document.getElementsByClassName(‘myClassName’);
[/js]
CSS selector
[js]
document.querySelector(‘div #myID .myClassName’);
[/js]
That’s all for today. I hope someone finds this useful. Thanks for reading.

Kindest Regards,
Sibeesh Venu

Generate Screenshot Using HTML and JavaScript

SibeeshVenu — Mon, 29 Dec 2014 19:27:11 +0000

Introduction

Generate a screenshot using HTML and JavaScript, yeah that is what I meant. I was just searching for some unanswered article here, one member was asking about this, so I thought I would write a tip about that. Here it is, you can see the actual article reference here.

Procedure

Step 1

You need an HTML page with some JavaScript code andCSS. That’s all we need.

Create an HTML file just like this:

[html]

Take Web Page Screenshot with HTML5 and JavaScript

Generate
Screenshot »

[/html]

Step 2

If you want, you can create some styles and apply them.

Now it’s time to create the JavaScript function generate() that I specified in an tag.
[html]

[/html]

Complete Code

Screenshot.html
[html]

Take Web Page Screenshot with HTML5 and JavaScript

Generate
Screenshot »

[/html]

Conclusion

Please share me your valuable suggestions and feedback.

Kindest Regards
Sibeesh Venu