Referencing Elements in JavaScript

Hi all, In here we are going to discuss about how to reference elements in JavaScript. That means how to find and access HTML elements in a HTML page. There are several ways to do it. They are,

1. Find HTML elements by id
2. Find HTML elements by tag name
3. Find HTML elements by class name
4. Find HTML elements by CSS selectors

Let's try to understand each of these by using examples.

Find HTML elements by id

Example 1

Figure 1

In here, document.getElementById(‘paragraph’) is a method belongs to document object. It search through entire document and look for the element with id called 'paragraph'. Then it can be found and changed them. In here, we put an event, onclick, inside the paragraph. So, when we click the paragraph, 'click here', it calls function 'change'. Inside the paragraph, document.getElementById(‘paragraph’) method is used. So, then element with id named 'paragraph' is searched through the document and found. Then, by using 'par.innerHTML' , paragraph is replaced.

Result is shown in Figure 2.

Figure 2

When paragraph is clicked, it changed as Figure 3.

Figure 3

Find HTML elements by tag name

This is similar as the above one. Only difference is, tag name is used instead id in here.

Example 2

Figure 4

In here, there are several paragraphs. By using document.getElementByTagName("p"), all the paragraphs are searched. Then paragraph with id 'paragraph' is replaced by the first paragraph in here.

So result is as follows.

Figure 5

Find HTML elements by class name

In here, class name is used to find the HTML element. 

Example 3

Figure 6

In here, paragraph is searched using the class name. There are several classes with same class name. So, para[0] is used to select the first paragraph. 

Result is as follows.

Figure 7

Find HTML elements by CSS selectors

In here "querySelectorAll" method is used to find HTML elements.

Example 4

Figure 8

Result is shown in Figure 9.

Figure 9

Please go through the examples and try on your own. It will help you to understand about referencing elements. Thank you.

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.