Chapter 2 CSS
Chapter 2 CSS
Chapter 2
Array:
An array is very similar to a variable in that an array tells the browser to reserve
a place in memory that can be used to store information. An array can comprise one
or multiple elements. Each element is like a variable in that an array element refers
to a memory location where information can be temporarily stored. An array is
identified by a unique name, similar to the name of a variable. A number called an
index identifi es an array element. The combination of the array name and an index
is nearly the same as a variable name. JavaScript array is an object that represents a
collection of similar type of elements.
Declaring an Array
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
<html>
<body>
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
</body>
</html>
o/p
Sonoo
Vimal
Ratan
<html>
<body>
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
Example 2)
<html>
<head>
<title>Display Array Elements</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
var products = new Array()
products[0] = 'Soda '
products[1] = 'Water'
products[2] = 'Pizza'
products[3] = 'Beer'
for (var i = 0; i < products.length; i++)
{
document.write(products[i] + '<br>')
}
</script>
<noscript>
<h1> JavaScript Required</h2>
</noscript>
</body>
</html>
<body>
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
Example:
<html>
<head>
<title>Display Array Elements</title>
</head>
<body>
<script language="Javascript">
var products = new Array()
products[0] = 'Soda ';
products[1] = 'Water';
products[2] = 'Pizza';
products[3] = 'Beer';
products[products.length] = 'chip';
for (var i = 0; i < products.length; i++)
{
document.write(products[i] + '<br>');
}
</script>
</body>
</html>
<html>
<head>
<title>Display Array Elements</title>
</head>
<body>
<script language="Javascript">
var products = new Array()
products[0] = 'Soda ';
products[1] = 'Water';
products[2] = 'Pizza';
products[3] = 'Beer';
products.sort();
for (var i = 0; i < products.length; i++)
{
document.write(products[i] + '<br>');
}
</script>
</body>
</html>
o/p
Beer
Pizza
Soda
Water
concat():It returns a new array object that contains two or more merged arrays.
The concat() method separates each value with a comma.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>The concat() method is used to merge (concatenate) arrays:</p>
<script>
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
document.write(myChildren);
</script>
</body>
</html>
o/p
Cecilie,Lone,Emil,Tobias,Linus
2)<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>join()</h2>
<script>
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
o/p
JavaScript Array Methods
concat()
The concat() method is used to merge (concatenate) arrays:
CecilieEmil,Tobias,LinusLone
3)
<html>
<head>
<title>Display Array Elements Using concat() and join()</title>
</head>
<body>
<script language="Javascript">
var products = new Array();
products[0] = 'Soda' ;
products[1] = 'Water';
products[2] = 'Pizza';
products[3] = 'Beer';
var str = products.concat();
document.write(str);
document.write('<br>');
var str = products.join(' ');
document.write(str);
</script>
<noscript>
<h1> JavaScript Required</h2>
</noscript>
</body>
</html>
o/p
Soda,Water,Pizza,Beer
Methods Description
concat()
It returns a new array object that contains two or more merged arrays.
copywithin()
It copies the part of the given array with its own elements and returns the modified
array.
every()
It determines whether all the elements of an array are satisfying the provided function
conditions.
fill()
It fills elements into an array with static values.
filter()
It returns the new array containing the elements that pass the provided function
conditions.
find()
It returns the value of the first element in the given array that satisfies the specified
condition.
findIndex()
It returns the index value of the first element in the given array that satisfies the
specified condition.
forEach()
It invokes the provided function once for each element of an array.
includes()
It checks whether the given array contains the specified element.
indexOf()
It searches the specified element in the given array and returns the index of the first
match.
join()
It joins the elements of an array as a string.
lastIndexOf()
It searches the specified element in the given array and returns the index of the last
match.
map()
It calls the specified function for every array element and returns the new array
pop()
It removes and returns the last element of an array.
push()
It adds one or more elements to the end of an array.
reverse()
It reverses the elements of given array.
shift()
It removes and returns the first element of an array.
slice()
It returns a new array containing the copy of the part of the given array.
sort()
It returns the element of the given array in a sorted order.
splice()
It add/remove elements to/from the given array.
unshift()
It adds one or more elements in the beginning of the given array.
<html>
<head>
</head>
<body>
<script language="Javascript">
var products = new Array();
products[0] = 'Soda' ;
products[1] = 'Water';
products[2] = 'Pizza';
products[3] = 'Beer';
document.write("Original array<P>");
for (var i = 0; i < products.length; i++)
{ document.write(products[i] + '<br>');
}
products.pop();
document.write("<p>after pop() remove last element <BR>");
for (var i = 0; i < products.length; i++)
{ document.write(products[i] + '<br>');
}
products.push('Burger');
o/p
Original array
Soda
Water
Pizza
Beer
after pop() remove last element
Soda
Water
Pizza
after push array add element at end
Soda
Water
Pizza
Burger
after reverse element of list
Burger
Pizza
Water
Soda
Function
Function as part of your JavaScript that has a name and contains one or more
statements they are used to perform operations. We give name to the function and
write the statement(s) that are con-tained within the function. We can use the name
of the function elsewhere in your JavaScript whenever you want the browser to
execute those statements. A function can be called from anywhere in the JavaScript
file or in the HTML document. JavaScript functions We can call JavaScript function
many times to reuse the code.
A function definition consists of four parts: the name, parentheses, a code block,
and an optional return keyword.
Dont's:
• Cannot begin with a digit
• Cannot be a keyword
• Cannot be a reserved word
Syntax of function:
function function-name(){
//body of function;
}
example of function:
function IncreaseSalary()
{
var salary = 500000 * 1.25;
alert('Your new salary is ' + salary);
}
MULTIPLE ARGUMENTS:
example of function with arguments
function IncreaseSalary(OldSalary, PercIncrease)
{
SCOPE OF VARIABLES:
function IncreaseSalary(OldSalary)
{
var NewSalary = OldSalary * 1.25
alert("Your new salary is " + NewSalary)
}
From the above example,a variable can be declared within a function, such as the
OldSalary variable in the IncreaseSalary() function.Is called a local variables.
CALLING OF FUNCTION:
A function is called by using the functionname followed by parentheses. If the
function has arguments, values for each argument are placed within the parentheses.
You must place these values in the same order that the arguments are listed in the
function defintion.
Syntax:
functionname();
Example of Calling a function without arguments:
IncreaseSalary();
Example of Calling a function with arguments:
IncreaseSalary(600000,9);
<html>
<head>
<title>Functions</title>
<script language="Javascript">
function IncreaseSalary()
{
var salary = 500000 * 1.25
//alert('Your new salary is ' + salary)
document.write("new salary is "+salary);
}
</script>
</head>
<body>
<script language="Javascript">
IncreaseSalary();
</script>
</body>
</html>
With args
<html>
<head>
<title>Functions</title>
<script language="Javascript">
function IncreaseSalary(OldSalary, PercIncrease)
{
var NewSalary =OldSalary * (1 + (PercIncrease / 100));
alert("Your new salary is " + NewSalary);
}
</script>
</head>
<body>
<script language="Javascript">
var Salary = prompt('Enter old salary.', ' ');
var Increase =prompt('Enter salary increase as percent.', ' ');
IncreaseSalary(Salary, Increase);
</script>
</body>
</html>
String
String is a collection of character. JavaScript strings are used for storing and
manipulating text.
There are 2 ways to create string in JavaScript
By string literal
By string object (using new keyword)
By string literal
The string literal is created using double quotes.
The syntax of creating string using string literal is given below:
var stringname="string value";
<html>
<body>
<script>
var str="This is string literal";
document.write(str);
</script>
</body>
</html>
String Methods
1. split()
2. substring()
3. substr()
4. tolowercase()
5. touppercase()
6. valueof()
7. tostring()
8. parseint()
9. parsefloat()
concat()
The JavaScript string concat() method combines two or more strings and returns a
new string. This method doesn't make any change in the original string.
Syntax:-
string.concat(str1,str2,...,strn)
str1,str2,...,strn - It represent the strings to be combined.
<html>
<body>
<script>
var x="CO";
var y="Class B";
var z=" VESP";
document.writeln(x.concat(y,z));
</script>
</body>
</html>
the toUpperCase()
method, which converts a string to uppercase characters
<!DOCTYPE html>
<html>
<head>
<title>toString method</title>
</head>
<body>
<script type="text/javascript">
var a = "MSBTE";
var WebSite = prompt(a+" to lowercase.", a.toLowerCase());
var b = "vesp";
var WebSite = prompt(b+" to uppercase.", b.toUpperCase());
</script>
</body>
</html>
charAt()
The charAt() method requires one argument i.e is the index of the character that you
want to copy. The following statement illustrates how to use the charAt() method:
html>
<head>
<title>Copy one character of a string</title>
</head>
<body>
<script type="text/javascript">
var FirstName = 'Bob';
var Character = FirstName.charAt(0);
alert(Character);
</script>
</body>
</html>
indexOf()
the index of a character by calling the indexOf() method of the string object. The
indexOf() method returns the index of the character passed to it as an argument.
If the character is not in the string, the method returns –1.
var IndexValue = string.indexOf('character');
<html>
<head>
<title>Identifying the index of a character in a string</title>
</head>
<body>
<script type="text/javascript">
var FirstName = 'Bob';
var IndexValue = FirstName.indexOf('o');
alert(IndexValue);
if(IndexValue != -1)
{
var Character = FirstName.charAt(IndexValue);
alert(Character);
}
</script>
</body>
</html>
Split()
The split() method creates a new array and then copies portions of the string, called
a substring, into its array elements. You must tell the split() method what string
(delimiter) is used to separate substrings in the string. You do this by passing the
string as an argument to the split() method. In this example, the comma is the string
that separates substrings. Here’s how you use the split() method:
var NewStringArray = StringName.split('delimiter string');
<!DOCTYPE html>
<html>
<head>
<title>Dividing a delimited string into a substring</title>
</head>
<body>
<script type="text/javascript">
var DataString = 'Bob Smith,Mary Jones,Tom Roberts,Sue Baker';
var NewArray = DataString.split(',');
document.write(DataString);
document.write('<br>');
for (i = 0; i < 4; i++) {
document.write(NewArray[i]);
document.write('<br>');
}
</script>
</body>
substring() :
The starting position specifies the first character that is returned by the substring()
method that is, the first character in the substring. The end position specifies the
character that follows the last character that is returned by the substring() method
that is, the position of the character that comes after the last character that you want
to include in the substring.
var NewSubstring = StringName.substring (StartingPosition, EndPosition);
<html>
<head>
<title>Using substring()</title>
</head>
<body>
<script type="text/javascript">
<head>
<title>String to Integer and Float</title>
</head>
<body>
<script type="text/javascript">
var a = "123";
var WebSite = prompt("Integer value of String.", parseInt(a));
var b = "123.75";
var WebSite = prompt("Float value of String.", parseFloat(b));
</script>
</body>
</html>
The toString() method can be used to convert both integers and decimal values
(floats) into String. To convert a number value to a string:
Var NumCount = 100;
var StrCount = NumCount.toString();
<!DOCTYPE html>
<html>
<head>
<title>toString method</title>
</head>
<body>
<script type="text/javascript">
var a = 123;
var WebSite = prompt("String value of Integer.", a.toString());
var b = 123.75;
var WebSite = prompt("String value of Float.", b.toString());
</script>
</body>
</html>