JavaScript Objects

Hi everyone, Today we are going to discuss about objects of JavaScript.
JavaScript is an object based programming language. So, everything in JavaScript is an object. A JavaScript object is an entity which have properties and methods.

There are 3 ways to create objects in JavaScript. Let's look at these methods one by one with examples.

1. By object literal
2. By creating instance of object
3. By using a constructor

By object literal

Syntax

object_name = {property1 : value1 , property2 : value2, ...}

Let's look at an example and try to understand it. 

Example 1

Figure 1

In here, we create an object named 'employee'. There are 3 properties for this object, they are id, name and age. We assign values for each of this property. To access the property of object we must use, 

object_name.property

Try to access by simply using property without object name will not be work. You can try it and watch the result.

Here is the result we got.

Figure 2

In the result, id, name and age of employee is shown.

By creating instance of object

In here, we create an object using new keyword.

Syntax

var object_name = new Object();

Example 2

Figure 3

In here, we first declared an object. Then we add properties to object as 

                                               object_name.property = property value 

Here is the result.

Figure 4

As you can see, we got the same result as previous example.

By using a constructor

First we look at what constructor is. A constructor is a special method of a class or structure in object-oriented programming that initializes an object of that type. It can be used to set the values of the members of an object, either to default or to user-defined values. JavaScript provides a special constructor function called Object() to build the object.

In here, we create a function with arguments, each argument value can be assigned in the current object by using 'this' keyword. In here, this keyword refers to the current object.

Syntax

function object_name(parameter1, parameter2){

this.parameter1 = parameter1;

this.parameter2 = parameter2;

}

Let's look at the example and try to figure it out.

Example 3

Figure 5

In here, we create a function called 'employee' and properties are included as parameters of function. The result we got is same as previous examples.

Figure 6

Defining methods of an object

To do this, we have to add property in the function with same name as method.

Example 4

Figure 7

In here we add a property called changeAge in function 'employee'. Also there is a method in same name. We can change age by using changeAge method. We can do it as follows.

object_name.property(property_value);

So, in our example, it is as follows.

emp.changeAge(35);

Figure 8 shows the output we got.

Figure 8

Hope you'll get a better understand about objects. Thank you for watching this tutorial.

JavaScript Loops

Hi all, today we are going to learn about loops in JavaScript, another important topic.
Programmers are like to work smarter not harder. So think that if you have to write same line again and again, what you would do. It is a burden, isn't it? So, at this point loops come to our help.

What is a loop?
Loop allows to run code repeatedly as many time that we wants without having to write that line of code again and again. If we want to write something 10 times, we can do it using loops easily.
In this tutorial we are going to discuss about four loops and two statements which are used in loops. They are

1. while loop
2. do-while loop
3. for loop
4. for-in loop
5. break statement
6. continue statement

while loop

In while loop, condition will be executed over and over again until the condition or expression becomes false. Once the expression becomes false, the loop terminates. Every time loop does that calls an iteration. There is one problem of while loop. What happens if conditions never fail, so, it called infinite loop. It is bad. Because only way we can stop the program in here is through task manager. Make sure that you never have a value, that never reach false to avoid this. 

Figure 1

Figure 1 shows how while loop works.

Syntax

while (condition){

   Statement(s) to be executed if condition is true

}

Let's look at example and try to understand this.

Example 1 

Figure 2

We have to use a variable to count how many times this loop runs. In here we use i. First, variable i is assigned to 1. This means we start to count the while loop at 1. Condition involves i. Then we must increase the counter inside the loop. The program carry on going until we get 11. When we get 11, condition become false and code is not run and stopped the program.The result is shown in Figure 3.

Figure 3

do-while loop

This is similar to while loop. But, in here, condition is checked at the end of loop. 

Figure 4

Figure 4 shows the flow chart of do-while loop.

Syntax

do{

   Statement(s) to be executed;

} 

while (condition);

Example 2

Figure 5

Output is shown below.

Figure 6

For Loop

For loops avoid making infinite loops by accident. This includes built in counter. Variable is increment every time loop reiterates or restarts. We don’t have to declare variable separately and increment inside the loop. For loop does all this. Figure 7 shows the flow chart of for loop.

Figure 7

Syntax

for (initialization;condition;increment){

   Statement(s) to be executed if test condition is true

}

In for loop there are 3 separated statements. Initialization declare counting, condition is to find the end of for loop and increment is to increment the counting.

Example 3

Figure 8

In here first, i is assigned to 1. Then check whether i is equal or less than 10. Since the condition is true, the line inside the block is executed. At the end of loop, increment takes place. Then loop starts with i=2 and same thing happen again. when i=11, since the condition is false, go out from the loop.

Result is follows.

Figure 9

For-in loop

A for-in loop iterates through the properties of an object and executes the loop's body once for each enumerable property of the object. You'll not be very clear about this because you haven't any experience of objects. I'm going to do my next tutorial about objects. I'm pretty sure that after you study that tutorial you'll clearly understand about this.

Syntax

for (var variablename in object){

   statement(s) to be executed

}

Example 4

Figure 10

In here, there are three properties for the object called 'person'. They are first, last and age. Values are assigned to these properties. For-in loop iterates through all these three properties and concatenate them and assigned to the variable 'me'. Here is the result we got.

Figure 11

break Statement

When JavaScript encounters a break statement in a loop it immediately exits the loop without executing any other statements in the loop. 

Example 5

Figure 12

In here, since while loop is in here, loop must iterate 9 times(since it is checked, whether x is less than 10). But, there is a break statement. so, when x gets equal to 5, loop immediately exists. So here is the result we got.

Figure 13

continue Statement

When JavaScript encounters a continue statement in a loop it stops the execution of the current iteration and goes back to the beginning of the loop to begin the next iteration.

Example 6

Figure 14

In here, since this is for loop values from 0 to 9 must show continuously. But since there is a continuous statement for i=5, when i equals 5, it stops the execution of current iteration and begin the next iteration that means 6.

So, the result is follows.

Figure 15

Hope you will understand loops from this tutorial. Go through examples carefully. Thank you for watching this tutorial.

Switch Case

Hi all, today we are going to talk about switch case. Switch case handles the multiple if...else if statements more efficiently.

Figure 1

As shown in the figure, the interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used. The break statement indicate in end of every case. When the suitable case is found out, the code in that block is executed and then break. Therefore other cases are not checked.

Syntax
switch (expression)
{
   case condition 1: 
   statement(s)
   break;
   
   case condition 2: 
   statement(s)
   break;
   ...
   
   default: 
   statement(s)

}

The following example is about switch case.

Example 1

Figure 2

In here, Ann is assigned to the variable 'name'. switch(name)means check variable name is what is equal to. In case 1, variable 'name' is checked that whether it is equal to 'Nick'. Since it is not equal to 'Nick' codes of that case are not executed and then name is checked that whether it is equal to 'Mickey' and it is also not equal. So then  in next case, variable 'name' is checked whether it is equal to 'Ann'. They are equal. So the codes of that case is executed and end of the code break statement is done. So, cases after this case are not checked, therefore the time is saved.

The result is follows.

 Figure 3

Hope you will use switch case in better way and thank you for watching this tutorial.

If Statement

Hi all, Today we are going to discuss about if statements.
In real life, most of time we have to take decisions based on conditions.
eg : If today is a rainy day, I will take umbrella.
       If teacher is absent today, I will come home early.

Conditions in programming is same as real life. A part of code will be executed, if the condition is true. If it is false we can skip it and just go ahead.

       

 Figure 1

This flow chart shows how the if else statement works.

We are going to discuss about 3 forms of JavaScript if...else statement in this tutorial.

1. if statement
2. if...else statement
3. if...else if... statement
4. nested if statement

if Statement

Syntax

 if (condition){

   code to be executed if condition is true

}

In here, if the condition is true, the code is executed and if it is not true, we can just go ahead and skip the code. Let's look at example.  Most of the times, you will use comparison operators while making decisions.

Example 1

Figure 2

 In here, first we assigned Friday to variable called 'day'. Then in if statement we check whether the day variable is equal to Friday. To check this == operator is used.  We can go into curly brackets if the condition is true. That means the condition inside the curly bracket is executed if the condition is true only. In this example, condition is true, so the line inside the curly brace is executed. The output is shown below. 

Figure 3

if...else 

Syntax

if (condition){

   code to be executed if condition is true

}
else{
 code to be executed if the condition is not true
}

In if statement, if the condition is not true, there isn't any statement to be executed. Codes to be executed will be skipped at that time. But in if...else statement, if the code is not true,  then the given statement(s) in the else block are executed.

Example 2

Figure 4

In here, Tuesday is assigned to variable day. Then, the condition is checked whether the day is equal to Friday. Since the day is Tuesday, this condition becomes false. So, if statement is skipped and lines of else condition are executed. So the result is shown below.

Figure 5

           

if...else if... Statement      

This allows JavaScript to take correct decision out of several conditions.

Syntax

if(condition 1){

   statement(s) to be executed if condition 1 is true

}

else if(condition 2){

   statement(s) to be executed if condition 2 is true

}

else if(condition 3){

   statement(s) to be executed if the condition 3 is true

}

else{

   statement(s) to be executed if no condition is true

}

In here, first condition 1 is checked whether it is true. If it is true, the given statement(s) of if block are executed. If it is not true, then  condition 2 is checked. If it is not true, then condition 3 is checked. If there isn't any condition true, then the statement(s) of else block is checked.

Example 3

Figure 6

In here, 68 is assigned to variable 'marks'. Condition 1 is checked first. Since the marks is not greater than 75, the condition becomes false. So, then checked the condition 2. Since marks are greater than 60, the condition becomes true. So the statement inside that block is executed. 

So the result is shown below.

Figure 7

nested if

This is not much different than others. In here we can write if statement inside another if statement.

Figure 8

In here we assigned 100 to variable 'marks'. In first condition, marks is checked whether it is greater than 100. Since marks is 100, the condition is true, therefore then the codes inside the block are executed. So, then check the marks whether it is equal to 100 or not. Since the condition is true, statement inside that block is executed. Now let's see the results.

Figure 9

You can change the marks see the results. Hope you will understand this tutorial.

Arrays

Hi all, today I'm going to discuss about JavaScript arrays.
Think that we have to store five names. To do that we have to define 5 separate variables like below.
var name1 = "John";
var name2 = "Ann";
var name3 = "Nick";
var name4 = "Steve";
var name5 = "Deena";

This is not much difficult, because there are only 5 names. But what would happen if we have to store names of students of a class or a school. Oh...it will be a really mess. Isn't it? Thinkig of storing each student's name in a seperate variable makes us confused. So, what is the solution for this? Solution is Array.

What is an array?
Array is a collection of variables of same type. We can store multiple values in a single variable using an array.
That means all the names of the students' of class or school can be stored in a single variable. Great. Isn't it?

How to create an array?

To declare an array, following syntax is used.
var arrayName = new Array();

We can insert values to array as follows,
var names = new Array("John", "Ann", "Nick", "Steve", "Deena");

In  here, the values that stored in the array are called as elements. 
To print this array,
document.write(names);

Example 1

Figure 1

In  here 5 values are stored in one variable called 'names'. The result we got is below.

Figure 2

As you can see, as the result we got the whole array. If we have to display only one element from the array, what we should do?

For that, we can use array index. Array index is the position of the element inside the array. By using array index, we can access an individual element inside the array.

Example 2

Figure 3

When we working with arrays, computers start working at 0 instead of 1. So the index of first element is 0. So the names[0] is "John" and names[1] is "Ann". The result we got is shown in figure 4.

Figure 4

If we don’t know the elements of array at the beginning and we only know the size of array,  how to create an array. For that, first we have to declare the array like this.

var arrayName = new Array(size of array);

eg: var names = new Array(5);

Then we can insert elements into array.

eg : names[0] = "John";

   names[1] = "Ann";

Example 3

Figure 5

The result is,

Figure 6

If we don't know the size of the array or elements of the array at the beginning, how to create an array?

To do that we have to declare array first as follows.

var arrayName = new Array();

Then we have to declare elements as follows.

names[0] = "John";
names[1] = "Ann";
In here, we declared two variables. So, the array has two variables.
If we declare 3 variables, then array has 3 variables. Like that the length of array is changed and it is not fixed.

We can find the length of array as follows.
arrayname.length 
By using this we can find out the number of elements in the array.

Example 4

Figure 7

The result is shown in figure 8.

Figure 8

Hope this tutorial will be helpful to understand arrays of JavaScript.

Variable Scope

Hi guys, today I'm going to discuss about variable scope. You can remember, we discussed about variables in previous lesson. In here we are talking about where to use variables.

What is Variable Scope?
The scope of a variable means the region of the program where the variable is defined.
There are two scopes in JavaScript. They are,

1. Global Variables
2. Local Variables

Global Variables

Global variables are declared outside the function. They can be used anywhere inside the program. Let's look at an example.

Example 1

Figure 1

In here, as you can see variable 'name' is declared outside the function. Therefore it is a global variable. So, that variable can be used inside the function or outside the function. Therefore let's see the result now.

Figure 2

As you can see, in the result we got, variable has been used inside the function and outside the function. Thus it is a global variable and it can be used in anywhere in the program.

Local Variables

Local variables are declared inside the function. They are only allowed to use inside the function.

To get a better understand, let's look at an example.

Example 2

Figure 3

In here, we declared the variable inside the function. If we declare a variable inside a function, it is called local variable. Therefore, in here, variable 'name' is a local variable. Since it is a local variable, it can be used inside the function only.

Figure 4

This is the result we got. As you can see, variable 'JavaScript' is only used in first statement. Because, since it is a local variable, it is only visible within the function it is defined. Since the second statement is placed outside the function, it doesn't know what is the variable 'name' means. So, it doesn't display the value of it.

As a good programmer you must know where to use global variables or local variables. I think these examples will be helpful to you understand the variable scope.

Thank you.

Functions

Hi all, Today I am going to discuss about functions.

First we look at what are functions.

A function is a block of reusable code. It is useful because you can execute it many times. Also we can use the same code many times with different arguments, to produce different results.  A JavaScript function is executed when "something" invokes it (calls it).

To create a JavaScript function we have to do 2 steps. They are,

1. Define a function
2. Invoke a function

Function Syntax

function function_name(parameter1, parameter2){
code to be executed
}

We have to know the difference between parameters and arguments. Parameters are the names listed in the function and arguments are the real values received by the function.

Define a Function
JavaScript functions are defined with the function keyword which is followed by a name and parentheses.
'function' keyword is used To tell JavaScript that we are going to create a function. Defined functions are not executed immediately. They will be executed later, when they are invoked (called upon).

Invoke a Function
The code inside the function will execute when "something" invokes (calls) the function.

There are 3 ways to create a function.

Approach 1 (Function Declaration)
function addNumbers(a,b){
return a+b;
}

We can invoke this function as below
addNumbers(2,5);

Approach 2 (Function Expression)

var x = function(a,b) {

return a+b;

}

we can invoke this function as,

x(4,3);

A function expression can be stored in a variable and variable can be used as a function. As an example

var z = x(4,3);

Approach 3 (Using Function() Constructor)

There is a built in JavaScript function constructor called Function(). Functions can also be defines with using this constructor.

var addNumbers = new Function("a" , "b" , "return a+b");

To invoke this:

var result = addNumbers(2,8);

If you are a beginner to the programming , you may be don't know what the constructor is. The constructor is a special method for creating and initializing an object created with a class. If you don't understand it well, don't confuse , we will meet it again at JavaScript objects. You will be definitely understand what is constructor is at there.

Now let's try to understand these functions using examples.

Approach 1

Example 1

In here we show you how to create a function without parameters.

Figure 1

The result is shown below. First we got the web page with only 'click' button. When the button is clicked, the alert message is popped as shown below.

Figure 2

In here the function is invoked by clicking a button. That means the function is invoked by an event. Also we can invoke this function in usual way, such as 

myFunction();

You can try it on your own and see the result.

Example 2

In here I'm going to show how to use parameters in functions.

Figure 3

In here argument "hello" is passed to the function. By using document.write() , it is shown in web page.

Figure 4

Example 3

In this example I'm going to show how to use numeric values and do the calculations using them.

Figure 5

In here 3 and 7 are passed as arguments. As you can see parameters are a,b . so, a is replaced by 3 and b is replaced by 7. So the result is a+b = 3+7 . So the result is 10.

Here is the result we got,

Figure 6

Approach 2

Example 4

Figure 7

The answer is same as Figure 6.

In here, result(3,7)invokes the function and a,b replaced by 3,7 . The return value is assigned to the variable 'result'. It is shown in web page. Instead using document.write and result(3,7) together, we can also write it in separately. 

var z = result(3,7);

document.write(z);

This will also work. You can try it on your own.

Approach 3

Example 5

Figure 8

In here, Function() constructor is used. Parameters a,b are replaced by arguments 3,7 and the returned value is stored in variable addNumbers. Then this value is assigned to the variable result and it is shown in the web page.

Do these exercises and it will be easy to understand functions. If you have any questions don't hesitate to comment. Thank you.