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>
