Sometimes we need to know the browser’s name, version, etc. The Navigator object is used for this purpose.
Object: Navigator
Method or Function: appName, appVersion
Syntax: Navigator. appName
Syntax: Navigator. appVersion
Syntax: Navigator.platform
appName - holds the name of the browser
appVersion – holds the version of the browser
platform - ?
Example
<script type="text/javascript">
document.write("You are using "+navigator.platform);
document.write("<br />");
document.write("Your browser's name is "+navigator.appName);
document.write("<br />");
document.write("Browser version: "+ navigator.appVersion);
</script>
Method: Round()
The round() method of the Math object to round a number to the nearest integer.
Example
<script type="text/javascript">
document.write("3.14259 is rounded to " +Math.round(3.14259));
document.write("<br />");
document.write("3.51259 is rounded to " +Math.round(3.51259));
document.write("<br />");
document.write("4.5 is rounded to " +Math.round(4.5));
document.write("<br />");
document.write("4.49 is rounded to " +Math.round(4.49));
document.write("<br />");
document.write("-5.89 is rounded to " +Math.round(-5.89));
document.write("<br />");
document.write("-5.5 is rounded to " +Math.round(-5.5));
</script>
Here ‘Math’ is object and ‘round’ is function.
The browser will show the following:
3.14259 is rounded to 3
3.51259 is rounded to 4
4.5 is rounded to 5
4.49 is rounded to 4
-5.89 is rounded to -6
-5.5 is rounded to -5
Click the buttons below and see what outputs give.
The Math object allows to perform mathematical tasks.
The Math object includes several mathematical constants and methods.
The mathematical constants that can be accessed from the Math object, there are also several methods available.
JavaScript provides eight mathematical constants. These constants can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E.
Syntax: parseInt(string, radix)
To convert a value from float to integer we have to use the function or method parseInt().
Example
<html>
<head>
</head>
<body>
<script type="text/javascript">
var a = 5.5;
var b = 1;
var c = parseInt(a)+b;
document.write("parseInt(a)+b = "+c);
</script>
</body>
</html>
Output
Click the buttons below and see what outputs give.
To convert a value from string to float, we have to use the function or method parseFloat().
The parseFloat() function parses a string and returns a floating point number.
To convert a value from string to integer we have to use the function or method parseInt().
If the string begins with "0x", the radix is 16 (hexadecimal)
If the string begins with "0", the radix is 8 (octal).
If the string begins with any other value, the radix is 10 (decimal)
Syntax HTMLElementObject.innerHTML=text document.getElementById(id name).style.property = new style
Each HTML element has an innerHTML property.
The innerHTML property sets or returns the inner HTML of an element.
Example: 1
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Example: 2
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Changing text color.
Example: 3
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.color="blue";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Creating box.
Example: 4
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Example: 5
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="changeText();">Change the text</button>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
Output
I will disappear, if you click Change the text.
Example: 6
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="changeText();">Change the text</button>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
Output
I will disappear, if you click Change the text.
Example: 7
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById("thelink").innerHTML="Aspell";
thelink.href="http://aspell.org";
}
1.getElementById is a method or function of the document object.
2.getElementById can be accessed by using document.getElementById.
Syntax document.getElementById(id name).style.property = new style
Example: 1
<html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").style.color="red";
}
</script>
</head>
<body>
<div id="test">
I will change color, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>
</body>
</html>
Output
I will change color, if you click "Change the text".
Example: 2
<html>
<head>
<script type="text/javascript">
function visible()
{
document.getElementById("test").style.visibility='visible';
}
function invisible()
{
document.getElementById("test").style.visibility='hidden';
}
</script>
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="visible();">Click me to show</button>
<button onclick="invisible();">Click me to hidden</button>
Object: String Method or Function: split(argument) Syntax: String.split(arg)
Split function takes one argument called delimiter.
Every part of the string that comes in between the delimiter is separated as a string.
A delimiter can be any string or a character or even blank space.
Split() method converts any string to "lower" case letter.
Example: 1
<script type="text/javascript">
var a = "split-function-test";
document.write(a.split("-"));
</script>
Here we pass delimiter argument as ‘-‘ sign.
Example: 2
<script type="text/javascript">
var a = "split+function+test";
document.write(a.split("+"));
</script>
Here we pass delimiter argument as ‘+’ sign.
Example: 3
<script type="text/javascript">
var a = "split function test";
document.write(a.split(" "));
</script>
Object: String Method or Function: lastIndexof(String) Syntax:String. indexof(String)
lastIndexof function takes a character or string as an argument and finds the position of a character or word
in a string and returns the last occurrence position of the string.
Example
<script type="text/javascript">
var string="hello everybody, my name is Aspell";
document.write(string.lastIndexOf("e"));
</script>
Object: String Method or Function: indexof(String) Syntax: String. indexof(String)
Indexof function finds the position of a character or word in a string.
Indexof function takes a character or string as an argument and searches the given
string in the main string and returns the index or starting (first occurrence) position of the string.
If the Indexof function returns -1 ,it indicates that the searching string or character is not present
in the main string.
Example
<script type="text/javascript">
var string="hello everybody, my name is Aspell";
document.write(string.indexOf("everybody"));
</script>
Note: ‘everybody’ starts on the 6th letter of the string and computer language start counting from zero.
If we write,
document.write(string.indexOf("Aspell"));
The browser will show the following:
28
If we write ‘joe’, that not exist in the string, browser will return a negative number.
document.write(string.indexOf("joe"));
The browser will show the following:
-1
-1 indicates that ,there is no value or name like “joe” and this is false.
Object: String Method or Function: charAt(int) Syntax: String.charAt(int)
This method takes an integer value as an argument and returns the character of the position of that variable.
The position of the string starts from zero(0).
Example
<script type="text/javascript">
var x = "This is a charAt() example";
var y = x.charAt(8);
document.write(y);
</script>
Object: String Method or Function: toUpperCase(), toLowerCase() Syntax:String.toUpperCase() Syntax:String.toLowerCase()
We can convert a string to lower case or upper case in JavaScript. toUpperCase() method converts any string to "UPPER" case letters. toLowerCase() method converts any string to "lower" case letters.
Converting to Upper Case:
Example: 1
<script type="text/javascript">
var x = " This is a upper case text ";
document.write(x.toUpperCase());
</script>
Converting to Lower Case:
Example: 2
<script type="text/javascript">
var x = " This is a lower case text ";
var y = x.toLowerCase();
document.write(y);
</script>
Object: String Method or Function: replace(arg1, agr2) Syntax: string.replace(arg1, agr2)
The replace() function searches for a match in a string, and replaces the matched substring with a new substring.
The replace() function takes two parameters.
The first argument is what we are looking or searching for, and the second argument is what we will replace the found ones with.
Example: 1
<script type="text/javascript">
var string="hello everybody, my name is Aspell";
document.write(string.replace(/Aspell/,"Sky"));
</script>
Example: 2
<script type="text/javascript">
var string="hello everybody, my name is Aspell";
document.write(string.replace("Aspell","Sky"));
</script>
You can also perform a case-insensitive search:
Example: 3
<script type="text/javascript">
var string="hello everybody, my name is Aspell";
document.write(string.replace(/aspell/i,"Sky"));
</script>
You can also perform global, case-insensitive search:
Example: 4
<script type="text/javascript">
var string="hello everybody, my name is Aspell.";
string=string + " Again I say, my name is Aspell.";
document.write(string.replace(/aspell/gi,"Sky"));
</script>
Object: String Method or Function: match(arg) Syntax: string.match(arg)
The match() method is used on a string variable or literal, and takes a regular expression pattern as argument to retrieve the matches when matching that string against that regular expression.
If matches were found in the string, the match() method returns an array containing all matched substrings , or null if no match is found.
Example
<script type="text/javascript">
var string="hello everybody,my name is Aspell";
document.write(string.match("Aspell"));
</script>
If we write,
document.write(string.match("Aspelll"));
The Switch statement in PHP is used to perform one of several different actions based
on one of several different conditions.
Switch case is used to when a condition may have multiple results.
If you want to select one of many blocks of code to be executed, use the Switch statement.
Switch statement is similar to if..else if..else statement.
The switch statement is used to avoid long blocks of if..else if..else code.
Syntax
switch (expression)
{
case label1:
code to be executed if expression = label1;
break;
case label2:
code to be executed if expression = label2;
break;
default:
code to be executed
if expression is different
from both label1 and label2;
}
How it works
1. The value of the expression is compared with the values for each case in the structure .
2. If there is a match, the code associated with that case is executed.
3. After a code is executed, break is used to stop the code from running into the next case. break means, if there is one statement executes, then there is no need to go rest of case statement.
4. The default statement is used if none of the cases are true.
Last case is always default. This is similar to the last else statement.
If none of the above conditions are true, then default will execute.
Example
<script type="text/javascript">
for(var i=1; i<=5; i++)
{
switch(i)
{
case 1:
document.write("when i=1 then case 1 executes <br />");
break;
case 2:
document.write("when i=2 then case 2 executes <br />");
break;
case 3:
document.write("when i=3 then case 3 executes <br />");
break;
default:
document.write("When i=4 then Dedault executes <br />");
break;
}
}
</script>
Output
when i=1 then case 1 executes
when i=2 then case 2 executes
when i=3 then case 3 executes
When i=4 then Dedault executes
Function Function_Name([arg1 [, arg2 [, ... argN ]],]){ Function_Body
}
You can pass arguments to a function.
Parameters helps to pass informations/ arguments into the function.
The arguments can be either numbers or strings.
Output of the function depends on the arguments you give it.
<body onload="alertMe('hi everybody,here I use parameter in function to pass argument')">
</body>
</html>
Example: 2
<html>
<head>
<script language="javascript">
function alertMe(string)
{
alert(string)
}
</script>
</head>
<body onload="alertMe(' hi everybody,here I use parameter in function to
pass argument ')" onunload="alertMe('Good bye,have a nice day')";>
</body>
</html>
When you click “cross button” of the browser, not dialog box, the following alert box will appear in your browser:
1. A function is a block of statements that perform a specific task of same kind.
2. A function has a name and it is reusable.
3. A function invoked from other parts of a program.
4. A function may have return value or not.
5. A function may have parameters or not.
6. The statements inside the function will not be executed automatically.
7. The function is called from any part of the program and then execute the statements inside the function.
8.When a program calls a function, program control is transferred to the called function.
A called function returns control to the caller when its return statement is executed or when function’s ending closing brace is reached.
Syntax:
returnValueType function_name(parameter-list)
{
// statements that will be executed
}
Example: 1
<script type="text/javascript ">
function hello()
{
alert("This text is in function hello");
}
hello();
</script>
Example: 2
<script type="text/javascript ">
function hello()
{
alert("This text is in function hello");
}
hello();
alert("This text is not in function hello");
</script>
Example: 3
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This is my first java script function")
}
</script>
</head>
<body>
<input type="button" value="Click here to display the message"
onclick="message()">
</form>
</body>
</html>
Output
Example: 4
<html>
<head>
<script language="javascript">
function alertMe() {
alert("hello everybody !")
}
</script>
</head>
<body onload="alertMe()">
</body>
</html>
The browser will show the following :
When browser will open first time, the above dialog box will display.
Associative array = Associative word with another word.
In the script below, we create the basis for a Acronym Lookup
program in JavaScript. We will use an associative array to reference
the meaning of each acronym, and use the acronym as the associative
array's index:
We have three associative arrays: MPLS (links the Multi-Protocol
Label Switching), SSTP (links the Secure Socket Tunneling
Protocol), and LDAP (links the Lightweight Directory
Access Protocol).
Example: 1
<script type="text/javascript">
var Protocols = new Array();
Protocols["MPLS"]="Multi-Protocol Label Switching";
Protocols["SSTP"]="Secure Socket Tunneling Protocol";
Protocols["LDAP"]="Lightweight Directory Access Protocol";
From the output we see that last element is Four.
We want to remove Four.
Lets see the following example:
Example: 2
<script type="text/javascript">
var names=new Array("One" , "Two", "Three", "Four");
for(i=0;i<names.length;i++)
{
document.write(names[i]+ "<br>");
}
names.pop(); //Now our names array contains three elements.
document.write("Now we will not see last element <br><br>");
for(i=0;i<names.length;i++)
{
document.write(names[i]+ "<br>");
}
</script>
Output
The pop() method also returns the element which is poped or removed.
Object: Array_name Method or Function: sort() Syntax: Array_name.sort()
The sort method sorts array elements either alphabetic or numeric, and either ascending or descending.
Sort method changes the original array.
When nothing is passed to the sort method, every value is converted to a string and sorted in lexicographic order.
We have twelve months, January through December in array month.
We will sort these twelve months alphabetically.
Example
<script type="text/javascript">
var month = new Array("January" , "February", "March", "April", "May", "June","July", "August",
"September", "October", "November", "December");
An array's length property returns the number of elements in an array.
We can find the length or size of any JavaScript array by using its length property.
Example
<script type="text/javascript">
var names=new Array("Nora " , "Natalie", "Nicole");
document.write(names.length);
</script>
Click the buttons below and see what outputs give.
Object: Array
Method or Function: concat(argument) Syntax: array1.concat(array2,array3,...,arrayn)
concat() method takes two or more array elements and adds them to the end of array.
Useing the concat() method, returns a copy of an original string and the string passed by argument.
The concat() method does not modify the original string, and only a copy of the result is returned.
Example: 1
<script type="text/javascript">
var month1 = new Array("January" , "February", "March", "April", "May", "June");
var month2 = new Array("July", "August", "September", "October", "November",
"December");
Here "month1" and "month2" are two arrays and "months" is another array that contains now the elements of
"month1" and "month2" arrays.
We could use var months=month2.concat(month1);. In this case, the order of elements will change.
In the JavaScript array, we can store multiple values and also can print them wherever we wish.
To access an element in the array, use the variable which is assigned it to, followed by the element's index number inside square brackets ([]).
We can print array elements through loops.
We have 12 variables. We will display these 12 variables through loop.
