Examples on JavaScript: examples

Showing posts with label examples. Show all posts

JavaScript: Other Examples

Right click Disabled
Date and Time Object
Visit Counter
Form with validation

JavaScript: unshift Function

unshift Function:
Adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax:
arrayname.unshift(element1,element2.........elementn)

Example in HEAD section:

<html>
<head>
<title>unshift Function</title>
<script language="javascript">
var nushifted;
myArray = ["angel", "clown"];
document.writeln("myArray before: " + myArray + "<p>");
unshifted = myArray.unshift("mandarin", "surgeon");
document.writeln("myArray after: " + myArray + "<p>");
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>unshift Function</title>
</head>
<body>
<script language="javascript">
var nushifted;
myArray = ["angel", "clown"];
document.writeln("myArray before: " + myArray + "<p>");
unshifted = myArray.unshift("mandarin", "surgeon");
document.writeln("myArray after: " + myArray + "<p>");
</script>
</body>
</html>

OUTPUT

myArray before: angel,clown

myArray after: angel,clown,mandarin,surgeon

JavaScript: Shift Function

shift Function:
Removes the first element from an array and returns that element. This method changes the length of the array.

Syntax:
arrayname.shift()

Example in HEAD section:

<html>
<head>
<title>Shift Function</title>
<script language="javascript">
myArray = ["angel", "clown", "mandarin", "surgeon"];
document.writeln("myArray before: " + myArray + "<p>");
shifted = myArray.shift();
document.writeln("myArray after: " + myArray + "<p>");
document.writeln("Removed this element: " + shifted);
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Shift Function</title>
</head>
<body>
<script language="javascript">
myArray = ["angel", "clown", "mandarin", "surgeon"];
document.writeln("myArray before: " + myArray + "<p>");
shifted = myArray.shift();
document.writeln("myArray after: " + myArray + "<p>");
document.writeln("Removed this element: " + shifted);
</script>
</body>
</html>

OUTPUT

myArray before: angel,clown,mandarin,surgeon

myArray after: clown,mandarin,surgeon

Removed this element: angel

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: CEIL Function

ceil Function returns the smallest integer greater than or equal to a number.

Syntax:
ceil(a numebr)

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

Example in HEAD Section

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

Example in BODY Section

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

OUTPUT

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

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: Scroll on Statusbar

<html>
<head>
<title>Scroll on Statusbar</title>

<script language="javascript">
var msg="Welcome to my site"
window.status=msg;
var scr;
function scroll()
{
var fchar=msg.substring(0,1);
var length=msg.length;
msg=msg.substring(1,length)+fchar;
window.status=msg;
}
function startscroll()
{
scrollInterval=window.setInterval("scroll()",100);
}
function stopscroll()
{
window.clearInterval(scrollInterval);
window.status="Welcome to my site"
}
</script>

</head>
<body>
<h1>Start Scroll and Stop Scroll</h1>

<form name="f1">
<input type="button" value="Start Scroll" onclick="startscroll()">
<input type="button" value="Stop Scroll" onclick="stopscroll()">
</form>

</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: 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