Examples on JavaScript: example

Showing posts with label example. Show all posts

JavaScript How To

The HTML <script> tag is used to insert a JavaScript into an HTML page.

How to Put a JavaScript Into an HTML Page

<html>
<body>
<script language="javascript">
document.write("Hello Everybody!");
</script>
</body>
</html>

The code above will produce this output on an HTML page:

Hello Everybody!

Example Explained
To insert a JavaScript code into an HTML Page, then we use the <script> tag.Inside the <script> tag we use the type attribute to define the scripting language.

So, the <script language="javascript"> and </script> tells where the JavaScript starts and ends:

<html>
<head>
<title>......</title>
</head>
<body>
<script language="javascript">
...Write your Jvascript code hear...
</script>
HTML Statements
</body>
</html>

The word document.write is a standard JavaScript command for writing output to a page.

By entering the document.write command between the tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello Everybody! to the page:

Note: If we had not entered the <script language="javascript"> and </script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.

JavaScript: CharAt Function

charAt Function:
Using the charAt method you can find out the element in a string.

Syntax:
variablename.charAt(indexnumber);

Example in HEAD section:

<html>
<head>
<title>charAt Function</title>
<script language="javascript">
var anystring="Hello World";
document.write("The character at index 0 is " +anystring.charAt(0)+"<br>");
document.write("The character at index 1 is " +anystring.charAt(1)+"<br>");
document.write("The character at index 2 is " +anystring.charAt(2)+"<br>");
document.write("The character at index 3 is " +anystring.charAt(3)+"<br>");
document.write("The character at index 4 is " +anystring.charAt(4)+"<br>");
document.write("The character at index 5 is " +anystring.charAt(5)+"<br>");
document.write("The character at index 6 is " +anystring.charAt(6)+"<br>");
document.write("The character at index 7 is " +anystring.charAt(7)+"<br>");
document.write("The character at index 8 is " +anystring.charAt(8)+"<br>");
document.write("The character at index 9 is " +anystring.charAt(9)+"<br>");
document.write("The character at index 10 is " +anystring.charAt(10));
</script>
</head>
</html>

Example in BODY Section:

<html>
<head>
<title>charAt Function</title>
</head>
<body>
<script language="javascript">
var anystring="Hello World";
document.write("The character at index 0 is " +anystring.charAt(0)+"<br>");
document.write("The character at index 1 is " +anystring.charAt(1)+"<br>");
document.write("The character at index 2 is " +anystring.charAt(2)+"<br>");
document.write("The character at index 3 is " +anystring.charAt(3)+"<br>");
document.write("The character at index 4 is " +anystring.charAt(4)+"<br>");
document.write("The character at index 5 is " +anystring.charAt(5)+"<br>");
document.write("The character at index 6 is " +anystring.charAt(6)+"<br>");
document.write("The character at index 7 is " +anystring.charAt(7)+"<br>");
document.write("The character at index 8 is " +anystring.charAt(8)+"<br>");
document.write("The character at index 9 is " +anystring.charAt(9)+"<br>");
document.write("The character at index 10 is " +anystring.charAt(10));
</script>
</body>
</html>

OUTPUT

These lines display the following:

The character at index 0 is H
The character at index 1 is e
The character at index 2 is l
The character at index 3 is l
The character at index 4 is o
The character at index 5 is
The character at index 6 is W
The character at index 7 is o
The character at index 8 is r
The character at index 9 is l
The character at index 10 is d

JavaScript: Power Function

pow function:
Returns base to the exponent power, that is, baseexponent .
Calculate x raised to y (xy)

Syntax:
pow(x,y)
x is the base number and y is the exponent to which to raise base.

Description:
Because pow is a static method of Math, you always use it as Math.pow(), rather than as a method of a Math object you created.

Example:

<html>
<head>
<title>Power Function</title>

<script language="javascript">
document.write("calculate 5 <sup> 2 </sup> = " + Math.pow(5,2) + "<br>");
document.write("calcuclate 3 <sup> 5 </sup> = " + Math.pow(3,5) + "<br>");
</script>

</head>
</html>

OUTPUT:

calculate 52 = 25
calcuclate 35 = 243

JavaScript: Min Function

Math.min() Function:
Find the minimum number in the array list.

Syntax:
min(number1,number2,.......numbern)

Description:
Because min is a static method of Math, you always use it as Math.min(), rather than as a method of a Math object you created.

Example

<html>
<head>
<title>MIN Function</title>

<script language="javascript">
document.write("The minimum number is " + Math.min(5,8) + " from(5,8)
");
document.write("The minimum number is " + Math.min(-2,-9) + " from(-2,-9)
");
document.write("The minimum number is " + Math.min(7.25,7.30) + " from(7.25,7.30)");
</script>

</head>
</html>

OUTPUT:

The minimum number is 5 from(5,8)
The minimum number is -9 from(-2,-9)
The minimum number is 7.25 from(7.25,7.30)

Javascript: FLOOR Function

floor function Returns the largest integer less than or equal to a number.

Syntax:
floor(a number)

Description:
Because floor is a static method of Math, you always use it as Math.floor(), rather than as a method of a Math object you created.

Example in HEAD Section

<html>
<head>
<title>Math.floor function</title>
<script languag="javascript">
document.write("Pass value is -45.65 and return value is = " + Math.floor(45.65) + "<br>");
document.write("Pass value is -45.65 and return value is = " + Math.floor(-45.65));
</script>
</head>
</html>

Example in BODY Section

<html>
<head>
<title>Math.floor function</title>
</head>
<body>
<script languag="javascript">
document.write("Pass value is -45.65 and return value is = " + Math.floor(45.65) + "<br>");
document.write("Pass value is -45.65 and return value is = " + Math.floor(-45.65));
</script>
</body>
</html>

OUTPUT

Pass value is -45.65 and return value is = 45
Pass value is -45.65 and return value is = -46

Javascript: BIG Function

big Funtion

Causes a string to be displayed in a big font as if it were in a BIG tag.

Syntax:
big()

Description:

Use the big method with the write or write methods to format and display a string in a document. In server-side JavaScript, use the write function to display the string.

Example:

<html>
<head>
<title>Big function</title>

<script languge="javscript">
function makebig()
{
var name=f1.t1.value.big();
document.write(name);
}
</script>

</head>
<body>

<form name="f1">
<input type="text" name="t1" value="click" size="20">
<input type="button" onclick="makebig()" value="click">
</form>

</body>
</html>

Javascript: ABS Function

abs function returns the absolute of a number.

Syntax

abs(A Number)

Description

Because abs is a static method of Math, you always use it as Math.abs(), rather than as a method of a Math object you created.

<html>
<head>
<title>Math.abs function</title>

<script language="javascript">
document.write("Math.abs(-4564) = " + Math.abs(-4564) + "<br>");
document.write("Math.abs(-5896.56) = " + Math.abs(-5896.56));
</script>

</head>
</html>

OUTPUT

Math.abs(-4564) = 4564
Math.abs(-5896.56) = 5896.56

Javascript: Move Text Along with Mouse

<html>
<head>
<title>Move text with mouse</title>

<script language="JavaScript">
<!-- Begin
function blockError(){return true;}
window.onerror = blockError;
</script>

<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
font-family:verdana;
font-weight:bold;
color:darkblue;
}
</style>

<script language="javascript">
var x,y
var step=20
var flag=0

var message="Move text Along with Mousee"
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}

</script>

</head>
<body onload="makesnake()" bgcolor="lightyellow" text="blue" link="#00FF00" alink="#00FF00">

<script>
<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if(document.layers)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
</script>

</body>
</html>

Javascript: Onmouseover Event

<html>
<head>
<title>Mouseover</title>

<script language="javascript">
function image1()
{
txt1.style.visibility="visible";
img1.style.visibility="visible";
txt2.style.visibility="hidden";
img2.style.visibility="hidden";
}
function image2()
{
txt1.style.visibility="hidden";
img1.style.visibility="hidden";
img2.style.visibility="visible";
txt2.style.visibility="visible";
}
function all()
{
txt1.style.visibility="visible";
img1.style.visibility="visible";
txt2.style.visibility="visible";
img2.style.visibility="visible";
}
</script>

</head>
<body><center>

<div style="visibility=visible" onmouseover="image1()" >
<span id="txt1">image1</span><p>
<img src="pixel_art.jpg" width=200 height=100 id=img1>
</div><p><p><hr>

<div style="visibility=visible" onmouseover="image2()">
<span id="txt2">image2<p></span>
<img src="classic_gaming.jpg" width=200 height=100 name=img2>
</div>

</body>
</html>

Javascript: Onload and Onunload Event

<html>
<head>
<title>Onload and Onunload</title>

<script language="javascript">
var username;
function hi()
{
username=prompt("Enter your name","Enter Name");
alert(username + " Welcome to my site");
}
function bye()
{
alert(username + " Thanks for visiting my site");
}
</script>

</head>
<body onload="hi()" onunload="bye()">
</body>
</html>

Javascript: Location Properties

<html>
<head>
<title>Location Properties</title>

<script language="javascript">
document.write("<h2>Some Location Properties</h2>");
document.write("href: ", window.location.href, "<br>");
document.write("Protocol: ", window.location.protocol, "<br>");
document.write("HostName: ", window.location.hostname, "<br>");
document.write("PathName: ", window.location.pathname, "<br>");
document.write("<hr>");
</script>

</head>
</html>

Javascript: Window Properties

<html>
<head>
<title>Window Properties</title>

<script language="javascript">
document.write("<h2>Some window Properties</h2>");
document.write("Innerheight: ", window.innerHeight, "<br>");
document.write("Innerwidth: ", window.innerWidth, "<br>");
document.write("Innerlocation : ", window.location, "<br>");
</script>

</head>
</html>

Javascript: Navigator Properties

<html>
<head>
<title>Navigator Object</title>

<script language="javascript">
document.write("<h2>Navigator Properties</h2>");
document.write("appName: ",navigator.appName, "<br>");
document.write("appVersion: ",navigator.appVersion, "<br>");
document.write("userAgent: ",navigator.userAgent, "<br>");
document.write("AppCode: ", navigator.appCode, "<br>");
document.write("Langugae: ", navigator.language, "<br>");
document.write("Platform: ", navigator.platform, "<br>");
document.write("mime types Length: ", navigator.mimeTypes.length, "<br>");
document.write("Plugins Length: ", navigator.plugins.length, "<br>");
</script>

</head>
</html>

Javascript: Open new Window

<html>
<head>
<title>Open Window</title>

<script lnaguage="javascript">
function display()
{
disp=window.open('','New','toolbar=no,statusbar=no,width=300,height=200');
mess="<ul><li><b>Name:</b>"+document.f1.name.value;
mess+="<li><b>Phone: </b>" + document.f1.phone.value;
mess+="<li><b>PAddress: </b>" + document.f1.address.value;"
disp.document.write(mess);
}
</script>

</head>
<body>
<h1>Form Example</h1><hr>
Enter the followin Information

<form name="f1">
<input type="text" name="name" value="Enter Name"><br>
<input type="text" name="phone" value="Enter Phone Number"><br>
<input type="text" name="address" value="Enter Address">
<input type="button" value="Display" onclick="display();">
</form>

</body>
</html>

Javascript: Change Background Color

<html>
<head>
<title>Change Color on click Cheskbox</title>

<script language="javascript">
function rcolor()
{
document.bgColor=f1.c1.checked ? "lightblue" : "white";
}
function lgcolor()
{
document.bgColor=f1.c2.checked ? "lightgrey" : "white";
}
function lycolor()
{
document.bgColor=f1.c3.checked ? "lightyellow" : "white";
}
</script>

</head>
<body>

<form name=f1>
<input type="checkbox" name=c1 onclick="rcolor()">Lightblue<br>
<input type="checkbox" name=c2 onclick="lgcolor()">Lightgrey<br>
<input type="checkbox" name=c3 onclick="lycolor()">Lightyellow <br>
</form>

</body>
</html>

Javascript: Call Function

<html>
<head>
<title>Call a function with two parameters</title>
<script language="javascript">
function multiple(n1,n2)
{
return n1*n2;
}
</script>
</head>
<body>

<script language="javascript">
function fun1()
{
var num1=f1.txt1.value;
var num2=f1.txt2.value;
document.write(multiple(num1,num2));
}
</script>

<form name="f1">
<input type="text" name="txt1" value=2 size=10>
<input type="text" name="txt2" value=2 size=10>
<input type="button" onclick="fun1()" value="calculate" size=>
</form>

</body>
</html>

Javascript: Calculate Text Length

<html>
<head>
<title>Calculate Total Word</title>
<script language="javascript">
function wordcount()
{
var a=f1.t.value;
a=a.split("");
f1.res.value=a.length;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="t">
<input type="button" value=Calculate Word onclick="wordcount()">
<input type="text" name="res">
</body>
</html>

Javascript: Create Array

Arrays:Arrays are Javascript object data capable of story sequence of values. These values are store index location with in array.
Array must be declare before it use.

Syntax:
1. arrayname = new Array(arraylength);
2. arrayname = new Array();

An array element index start with Zero (0) and end with arraylength-1

Example:

<html>
<head>
<title>Arrays</title>
</head>
<body>

&ltscript language="javascript">
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var i=0;
for(i=0;i<12;i++)
{
document.write(months[ i ] + "&ltbr>");
}
</script>

</body>
</html>

OUTPUT

January
February
March
April
May
June
July
August
September
October
November
December

Javascript: Switch Case

<html>
<head>
<title>Switch case</title>

<script language="javascript">
function calc()
{
var n1=f1.t1.value;
var n2=f1.t2.value;
switch(f1.opr.value)
{
case "+":
f1.result.value=Number(n1) + Number(n2);
break;
case "-":
f1.result.value=n1-n2;
break;
case "*":
f1.result.value=n1*n2;
break;
case "/":
f1.result.value=n1/n2;
}
</script>

</head>
<body>

<form name="f1">
<input type="text" name="t1">
<select name="opr">
<option value="+"> +
<option value="-"> -
<option value="*"> *
<option value="/"> /
</select>
<input type="text" name="t2">
<input type="button" value="Calculate" onclick="calc()">
<input type="text" name="result">
</form>

</body>
</html>

Javascript: For Loop

OUTPUT

Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World

More Examples