Right click Disabled
Date and Time Object
Visit Counter
Form with validation
Showing posts with label javascriptexamples. Show all posts
Showing posts with label javascriptexamples. Show all posts
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: 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>
<script 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 ] + "<br>");
}
</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
<html>
<head>
<title>For Loop</title>
</head>
<body>
<script language="javascript">
var i;
for(i=0;i<10;i++)
{
document.write("Hello World <br>");
}
</script>
</body>
</html>
OUTPUT
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Javascript: While Loop
<html>
<head>
<title>While Loop</title>
</head>
<body>
<script language="javascript">
var i=0;
while(i<5)
{
document.write("Hello World <br>");
i++;
}
</script>
</body>
</html>
OUTPUT
Hello World
Hello World
Hello World
Hello World
Hello World
<head>
<title>While Loop</title>
</head>
<body>
<script language="javascript">
var i=0;
while(i<5)
{
document.write("Hello World <br>");
i++;
}
</script>
</body>
</html>
OUTPUT
Hello World
Hello World
Hello World
Hello World
Hello World
Javascript: IF ELSE IF
<html>
<head>
<title>IFELSE</title>
<script language="javascript">
function checkage()
{
var age=f1.t1.value;
if(age>18)
document.write("Your age is greater than 18 years<br>");
else if(age==18)
document.write("Your age is 18 Years");
else
document.write("Yoru age is smaller than 18 years");
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name=t1>
<input type="button" value="Check" onclick="checkage()">
</body>
</html>
Javascript: IF ELSE
<html>
<head>
<title>IFELSE</title>
<script language="javascript">
function checkage()
{
var num=f1.t1.value;
if(num%2==0)
alert("Your entered number is even number");
else
alert("Yuor enteres number is odd number");
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name=t1>
<input type="button" value="Check" onclick="checkage()">
</body>
</html>
Javascript: Arithmatic Operators
<html>
<head>
<title>Arithmatic</title>
</head>
<body>
<script language="javascript">
var num1=12;
var num2=6;
var add=num1+num2;
var sub=num1-num2;
var mult=num1*num2;
var div=num1/num2;
document.write("Addition of two number = " + add + "<br>");
document.write("Subtraction of two number = " + sub + "<br>");
document.write("Multiplication of two number = " + mult + "<br>");
document.write("Division of two number = " + div + "<br>");
</script>
</body>
</html>
OUTPUT
Addition of two number = 18
Subtraction of two number = 6
Multiplication of two number = 72
Division of two number = 2
Javascript: Confirm Message
<html>
<head>
<title>Confirm Messge</title>
<script language="javascript">
var x=window.confirm("Are you OK!");
if(x)
{
document.write("<a href='google.htm'>Google Search"+ "</a>");
}
else
{
window.alert("It is Very Bad");
}
</script>
</head>
</html>
Javascript: Alert Message
<html>
<head>
<title>Alert Message</title>
<script language="javascript">
function alertmessage()
{
var num=document.form1.num.value;
alert("Your Entered Number is " + num);
}
</script>
</head>
<body>
<h1>Enter the number between 1 to 100</h1>
<form name="form1">
Enter a Numebr <input type="text" size=3 maxlength="3" name="num">
<input type="button" onclick="alertmessage();" value="Enter">
</form>
</body>
</html>
Javascript: Write Function
<html>
<head>
<title>Write Function</title>
</head>
<body>
<script language="javascript">
var x=12;
document.write("Hello Friends")
document.write("<p> <h1> <center> Hello, welcome to my page </center> </h1>");
document.write("Value of x variable is = " + x);
</script>
</body>
</html>
OUTPUT
Hello Friends
Value of x variable is = 12
Javascript: Type of Variable
Javascript consist of four types of Variable.
1. Integer: Number consist of integer and floating values.
2. String: A string user sequence of 1 or more than 1 characters that are enclosed by doublequotes(" ") or singlequotes(' ').
3. Bool: Boolean consist of Logical values i.e. True or False.
4. Null: Null consist of single value. Null which identifies null, empty or not existing reference.
Example:
<html>
<head>
<titleTypes of Variable</title>
</head>
<body>
<script language="javascript">
var intval=30;
var floatval=8.50;
var stringval="Hello";
var booleanval=true;
document.write("Integer value = " + intval + "<br>");
document.write("Float value = " + floatval + "<br>");
document.write("String value = " + stringval + "<br>");
document.write("Boolean value = " + booleanval + "<br>");
</script>
</body>
</html>
OUTPUT
Integer value = 30
Float value = 8.5
String value = Hello
Boolean value = true
Subscribe to:
Posts (Atom)