Html tutorials session 14

Html tutorials theory

continue Statement
The continue statement is mostly used in the loop constructs. The continue statement is denoted by the continue keyword. It is used to terminate the current execution of the loop and continue with the next repetition by returning the control to the beginning of the loop. This means, the continue statement will not terminate the loop entirely, but terminates the current execution.


<script>
var result = ‘’;
for (var i = 0; i <= 15; i++)
{
if((i%2) != 0)
{
continue;
}
result = result + i + ‘\n’;
}
alert (‘Even Numbers:\n’ + result);
</script>    

Arrays
Consider a scenario where you want to store the names of 100 employees within an IT department. This can be done by creating 100 variables and storing the names. However, keeping track of 100 variables is a tedious task and it results in inefficient memory utilization. The solution to this problem is to create an array variable to store the names of 100 employees.

An array is a collection of values stored in adjacent memory locations. These array values are referenced using a common array name. The values of an array variable must be of the same data type. These values that are also referred to as elements and can be accessed by using subscript or index numbers. The subscript number determines the position of an element in an array list.
JavaScript supports two types of arrays that are as follows

Single-dimensional array
Multi-dimensional array
Single-dimensional Array
In a single-dimensional array, the elements are stored in a single row in the allocated memory.
The first array element has the index number zero and the last array element has an index number one less than the total number of elements. This arrangement helps in efficient storage of data. In addition, it also helps to sort data easily and track the data length.
The array variable can be created using the Array object and new keyword along with the size of the array element.
The syntax to declare and initialize a single-dimensional array is as follows: 

Syntax:
var variable_name = new Array(size); //Declaration
variable_name[index] = ‘value’;
where,
variable_name: Is the name of the variable.
size: Is the number of elements to be declared in the array.
index: Is the index position.


<script>
//Declaration using Array Object and then Initialization
var marital_status = new Array(3);
marital_status[0] = ‘Single’;
marital_status[1] = ‘Married’;
marital_status[2] = ‘Divorced’;
//Declaration and Initialization
var marital_status = new Array(‘Single’,’Married’,’Divorced’);
//Declaration and Initialization Without Array
var marital_status = [‘Single’,’Married’,’Divorced’];
</script>    

Accessing Single-dimensional Arrays
Array elements can be accessed by using the array name followed by the index number specified in square brackets.
Access Array Elements Without Loops
An array element can be accessed without using loops by specifying the array name followed by the square brackets containing the index number.
Code Snippet 7 demonstrates a script that stores and displays names of the students using a single-dimensional array.

<script>
var names = new Array(“John”, “David”, “Kevin”);
alert(‘List of Student Names:\n’ + names[0] + ‘,’ + ‘ ‘ + names[1] + ‘,’ + ‘ ‘ + names[2]);
</script>    

In the code, var names = new Array(“John”,”David”,”Kevin”); declares and initializes an array. The names[0] accesses the first array element which is John. The names[1] accesses the second array element which is David.
The names[2] accesses the third array element, which is Kevin.

Access Array Elements With Loops
JavaScript allows you to access array elements by using different loops. Thus, you can access each array element by putting a counter variable of the loop as the index of an element. However, this requires the count of the elements in an array. So, the length property can be used to determine the number of elements in an array.
Code Snippet 8 demonstrates the script that creates an array to accept the marks of five subjects and display the average.

<script>
var sum = 0;
var marks = new Array(5);
for(var i=0; i<marks.length; i++)
{
marks[i] = parseInt(prompt(‘Enter Marks:’, ‘’));
sum = sum + marks[i];
}
alert (‘Average of Marks: ‘ + (sum/marks.length));
</script>    

In the code, var marks = new Array(5); declares an array of size 5. It displays a prompt box that accepts the marks for a subject in each iteration. Then, the code calculates and displays the average marks.
Multi-dimensional Array
Consider a scenario to store the employee IDs of 100 employees and their salary structure. The salary structure will include the basic salary, allowances, HRA, and the total gross salary. Now, if a single-dimensional array is used, then two separate arrays need to be created for storing employee IDs and salaries. However, using a multi-dimensional array, both IDs and salaries are stored in just one array.
A multi-dimensional array stores a combination of values of a single type in two or more dimensions. These dimensions are represented as rows and columns similar to those of a Microsoft Excel sheet. A two-dimensional array is an example of the multi-dimensional array.
The syntax to declare a two-dimensional array is as follows:
Syntax:
var variable_name = new Array(size); //Declaration
variable_name[index] = new Array(‘value1’,’value2’..);
where,
variable_name: Is the name of the array.
index: Is the index position.
value1: Is the value at the first column.
value2: Is the value at the second column.
Accessing Two-dimensional Arrays
Multi-dimensional arrays can be accessed by using the index of main array variable along with index of sub-array.
Access Array Elements Without Loops
Code Snippet 9 creates a two-dimensional array that displays the employee details.
Code Snippet 9:

<script>
var employees = new Array(3);
employees[0] = new Array(‘John’, ‘25’, ‘New Jersey’);
employees[1] = new Array(‘David’, ‘21’, ‘California’);
document.write(‘<H3> Employee Details </H3>’);
document.write(‘<P><B>Name: </B>’ + employees[0][0] + ‘</P>’);
document.write(‘<P><B>Location: </B>’ + employees[0][2] + ‘</ P>’);
document.write(‘<P><B>Name: </B>’ + employees[1][0] + ‘</P>’);
document.write(‘<P><B>Location: </B>’ + employees[1][2] + ‘</ P>’);
</script>    

In the code, var employees = new Array(3) creates an array of size 3. The declaration employees[0] = new Array(‘John’,’23’,’New Jersey’) creates an array at the 0th row of the employees array. Similarly, employees[1] = new Array(‘David’,’21’,’California’) creates an array at the first row of the employees array.
Access Array Elements With Loops
Code Snippet 10 creates a two-dimensional array to display the product details.

<script>
var products = new Array(2);
products[0] = new Array(‘Monitor’, ‘236.75’);
products[1] = new Array(‘Keyboard’, ‘45.50’);
document.write(‘<TABLE border=1><TR><TH>Name</TH><TH>
Price</TH></TR>’);
for(var i=0; i<products.length; i++)
{
document.write(‘<TR>’);
for(var j=0; j<products[i].length; j++)
{
document.write(‘<TD>’ + products[i][j] + ‘</TD>’);
}
document.write(‘</TR>’);
}
document.write(‘</TABLE>’);
</script>    

In the code, products[0] = new Array(‘Monitor’,’236.75’) creates an array at the 0th row of the products array. Similarly, products[1] = new Array(‘Keyboard’,’45.50’) creates an array at the first row of the products array. The condition, i < products.length, specifies that the counter variable i should be less than the number of rows in the array variable, products. For each row in the array, the condition, j < products[i].length specifies that the counter variable j, should be less than the number of columns specified the ith row of the array variable, products. Finally, document.write(“<TD>” + products[i][j] + “</TD>”) displays the values at the ith row and jth column of array variable, products.
Array Methods
An array is a set of values grouped together and identified by a single name. In JavaScript, the Array object allows you to create arrays. It provides the length property that allows you to determine the number of elements in an array. The various methods of the Array object allow to access and manipulate the array elements.


<script>
var flowers = new Array(‘Rose’, ‘Sunflower’, ‘Daisy’);
document.write(‘Number of flowers: ‘ + flowers.length + ‘<br/>’);
document.write(‘Flowers: ‘ + flowers.join(‘, ‘) + ‘<br/>’);
document.write(‘Orchid and Lily are Added: ‘ + flowers.push(“Orchid”, “Lily”) + ‘<br/>’);
document.write(‘Flowers (In Ascending Order): ‘ + flowers.sort() + ‘<br/>’);
document.write(‘Flowers Removed: ‘ + flowers.pop()+’<br/>’);
</script>    

In the code, an array variable flowers is created, that stores the names of three flowers. The length property is used to display the number of flowers in the array variable. The join() method joins the flower names and separates them with a comma. The push() method adds orchid and lily at the end of the array and the total number of flowers in the array list is displayed as 5. The sort() method sorts the flowers in alphabetical order. The pop() method retrieves the last element that is Sunflower, from the array list.
for...in Loop
The for...in loop is an extension of the for loop. It enables to perform specific actions on the arrays of objects. The loop reads every element in the specified array and executes a block of code only once for each element in the array.
The syntax of the for...in loop is as follows:
Syntax:
for (variable_name in array_name)
{
//statements;
}
where,
variable_name: Is the name of the variable.
array_name: Is the array name.
Code Snippet 12 demonstrates how to display elements from an array using the for...in loop.

<script>
var books = new Array(‘Beginning CSS 3.0’, ‘Introduction to HTML5’, ‘HTML5 in Mobile Development’);
document.write(‘<H3> List of Books </H3>’);
for(var i in books)
{
document.write(books[i] + ‘<br/>’);
}
</script>