Java script programms

Java Script programs cs567

Simple timing

<!DOCTYPE html>

<html>

<head>

<script>

function timedText()

{

var x=document.getElementById('txt');

var t1=setTimeout(function(){x.value="2 seconds"},2000);



}

</script>

</head>

<body>

<form>

<input type="button" value="Display timed text!" onClick="timedText()" />

<input type="text" id="txt" />

</form>

<p>Click on the button above. The input field will tell you when two, four, and six seconds have

passed.</p>

</body>

</html>


Timing event in an infinite loop - with a Stop button

<!DOCTYPE html>

<html>

<head>

<script>

var c=0;

var t;

var timer_is_on=0;

function timedCount()

{

document.getElementById('txt').value=c;

c=c+1;

t=setTimeout(function(){timedCount()},1000);

}

function doTimer()

{

if (!timer_is_on)

{

timer_is_on=1;

timedCount();

}

}

function stopCount()

{

clearTimeout(t);


timer_is_on=0;

}

</script>

</head>

<body>

<form>

<input type="button" value="Start count!" onClick="doTimer()" />

<input type="text" id="txt" />

<input type="button" value="Stop count!" onClick="stopCount()" />

</form>

<p>

Click on the "Start count!" button above to start the timer. The input field will count forever,

starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!"

button to start the timer again.

</p>

</body>

</html>

A clock created with a timing event

<!DOCTYPE html>

<html>

<head>

<script>

function startTime()

{

var today=new Date();

var h=today.getHours();

var m=today.getMinutes();


var s=today.getSeconds();

// add a zero in front of numbers<10<br>

m=checkTime(m);

s=checkTime(s);

document.getElementById('txt').innerHTML=h+":"+m+":"+s;

t=setTimeout(function(){startTime()},500);

}

function checkTime(i)

{

if (i<10)

{

i="0" + i;

}

return i;

}

</script>

</head>

<body onload="startTime()">

<div id="txt">< /div>

</body>

</html>

Write to the Document with JavaScript

<!DOCTYPE html>

<html>

<body>


<h3>My First Web Page</h3>

<script>

document.write("<p>My First JavaScript</p>");

</script>

</body>

</html>

Change HTML elements with JavaScript

<!DOCTYPE html>

<html >

<body >

<h3>My First Web Page</h3>

<p id="demo">My First Paragraph.</p>

<script>

document.getElementById("demo").innerHTML="My First JavaScript";

</script>

</body>

</html>


< !DOCTYPE html>

< html>

< body>

< h3>My Web Page

< p id="demo">A Paragraph.

< button type="button" onclick="myFunction()">Try it

< p>< strong>Note: myFunction is stored in an external file called "myScript.js".

< script type="text/javascript" src="myScript.js">

< /body>

< /html>

If statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to get a "Good day" greeting if the time is less than 20:00.</p>

<button onClick="myFunction()">Try it</button>

<p id="demo">< /p>


<script>

function myFunction()

{

var x="";

var time=new Date().getHours();v

if (time<20)

{

x="Good day";

}

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

If...else statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to get a time-based greeting.</p>


<p id="demo">< /p>


<script>


{

var x="";

var time=new Date().getHours();

if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}


}

</script>

</body>

</html>

Switch statement

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display what day it is today.</p>



<p id="demo">< /p>

<script>


{

var x;

var d=new Date().getDay();

switch (d)

{

case 0:

x="Today it's Sunday";

break;

case 1:

x="Today it's Monday";

break;

case 2:

x="Today it's Tuesday";

break;

case 3:

x="Today it's Wednesday";

break;

case 4:

x="Today it's Thursday";

break;

case 5:

x="Today it's Friday";

break;

case 6:


x="Today it's Saturday";

break;

}


}

</script>

</body>

</html>

The try...catch statement

<!DOCTYPE html>

<html>

<head>

<script>

var txt="";

function message()

{

try

{

adddlert("Welcome guest!");

}

catch(err)

{

txt="There was an error on this page.\n\n";

txt+="Error description: " + err.message + "\n\n";v

txt+="Click OK to continue.\n\n";

alert(txt);


}

}

</script>

</head>

<body>

<input type="button" value="View message" onClick="message()" />

</body>

</html>

The try...catch statement with a confirm box

<!DOCTYPE html>

<html>

<head>

<script>

var txt="";

function message()

{

try

{

adddlert("Welcome guest!");

}

catch(err)

{

txt="There was an error on this page.\n\n";

txt+="Click OK to continue viewing this page,\n";v

txt+="or Cancel to return to the home page.\n\n";

if(!confirm(txt))


{

document.location.href="http://www.google.com/";

}

}

}

</script>

</head>

<body>

<input type="button" value="View message" onClick="message()" />

</body>

</html>

Acting to the onclick event

<!DOCTYPE html>

<html>

<head>

<script>

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>My First JavaScript< /h1>


<p id="demo">This is a paragraph.< /p>

<button type="button" onclick="displayDate()">Display Date< /button>

</body>

</html>

Call a function

<!DOCTYPE html>

<html>

<head>

<script>


{

alert("Hello World!");

}

</script>

</head>

<body>


<p>By clicking the button above, a function will be called. The function will alert a message.</p>

</body>

</html>


Function with an argument

<!DOCTYPE html>

<html>

<body>

<p>Click the button to call a function with arguments</p>

<button onClick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>

function myFunction(name,job)

{

alert("Welcome " + name + ", the " + job);

}

</script>

</body>

</html>

Function with an argument 2

<!DOCTYPE html>

<html>

<head>

<script>

function myfunction(txt)

{

alert(txt);


}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Good Morning!')"

value="In the Morning">

<input type="button"

onclick="myfunction('Good Evening!')"

value="In the Evening">

</form>

<p>

When you click on one of the buttons, a function will be called. The function will alert

the argument that is passed to it.

</p>

</body>

</html>

Function that returns a value

<!DOCTYPE html>

<html>

<head>

<script>



{

return ("Hello world!");

}

</script>

</head>

<body>

<script>

document.write(myFunction())

</script>

</body>

</html>

Function with arguments, that returns a value

<!DOCTYPE html>

<html>

<body>

<p>This example calls a function which perfoms a calculation, and returns the result:</p>

<p id="demo"></p>

<script>

function myFunction(a,b)

{

return a*b;


}

document.getElementById("demo").innerHTML=myFunction(4,3);

</script>

</body>

</html>

DEMO

< head >

< script >

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

< /head >

< body >

< h3>My First JavaScript< / h3 >

< p id="demo">This is a paragraph.< /p >

< button type="button" onclick="displayDate()">Display Date< / button >

< / body >

For loop

<!DOCTYPE html>

<html>

<body>

<p>Click the button to loop through a block of code five times.< /p>


<button onclick="myFunction()">Try it< /button>

<p id="demo">< /p>

<script>


{

var x="",i;

for (i=0;i<5;i++)

{

x=x + "The number is " + i + "< br>";

}


}

</script>

</body>

</html>

Looping through HTML headers

<!DOCTYPE html>

<html>

<body>

<p>Click the button to loop from 1 to 6, to make HTML headings.< /p>


<div id="demo">< /div>


<script>


{

var x="",i;

for (i=1; i<=6; i++)

{

x=x + "< h" + i + ">Heading " + i + "< / h" + i + ">";

}


}

</script>

</body>

</html>

While loop

<!DOCTYPE html>

<html>

<body>

<p>Click the button to loop through a block of as long as < em>i< /em> is less than 5.< /p>


<p id="demo">< /p>

<script>


{

var x="",i=0;


while (i<5)

{


i++;

}


}

</script>

</body>

</html>

Do While loop

<!DOCTYPE html>

<html>

<body>

<p>Click the button to loop through a block of as long as < em>i< /em> is less than 5.< /p>


<p id="demo">< /p>

<script>


{

var x="",i=0;

do

{



i++;

}

while (i<5)


}

</script>

</body>

</html>

Break a loop

<!DOCTYPE html>

<html>

<body>

<p>Click the button to do a loop with a break.< /p>


<p id="demo">< /p>

<script>


{

var x="",i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

break;v


}


}


}

</script>

</body>

</html>

Break and continue a loop

<p>Click the button to do a loop which will skip the step where i=3.</p>


<p id="demo">< /p>

<script>


{

var x="",i=0;

for (i=0;i<10;i++)

{

if (i==3)

{

continue;

}


}



}

</script>

</body>

</html>

Alert box

<!DOCTYPE html>

<html>

<head>

<script>


{

alert("Hello! I am an alert box!");

}

</script>

</head>

< body>

<input type="button" onClick="myFunction()" value="Show alert box" />

</body>

</html>

Confirm box

<p>Click the button to display a confirm box.</p>



<p id="demo"></p>

<script>


{

var x;

var r=confirm("Press a button!");

if (r==true)

{

x="You pressed OK!";

}

else

{

x="You pressed Cancel!";

}


}

</script>

</body>

</html>

Prompt box

<!DOCTYPE html>

<html>

<body>


<p>Click the button to demonstrate the prompt box.</p>


<p id="demo"></p>

<script>


{

var x;

var name=prompt("Please enter your name","Harry Potter");

if (name!=null)

{

x="Hello " + name + "! How are you today?";


}

}

</script>

</body>

</html>

JavaScript statements

<!DOCTYPE html>

<html>


<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<div id="myDIV">A DIV.</div>

<script>

document.getElementById("demo").innerHTML="Hello Dolly";

document.getElementById("myDIV").innerHTML="How are you?";

</script>

</body>

</html>

JavaScript blocks

<!DOCTYPE html>

<html>

<body>

<h1>My Web Page</h1>

<p id="myPar">I am a paragraph.</p>

<div id="myDiv">I am a div.</div>

<p>

<button type="button" onClick="myFunction()">Try it</button>


</p>

<script>


{

document.getElementById("myPar").innerHTML="Hello Dolly";

document.getElementById("myDiv").innerHTML="How are you?";

}

</script>

<p>When you click on "Try it", the two elements will change.</p>

</body>

</html>

Single line comments

<!DOCTYPE html>

<html>

<body>

<h1 id="myH1"></h1>

<p id="myP"></p>

<script>


// Write to a heading:

document.getElementById("myH1").innerHTML="Welcome to my Homepage";

// Write to a paragraph:

document.getElementById("myP").innerHTML="This is my first paragraph.";

</script>

<p>< strong>Note:</ strong> The comments are not executed.</p>

</body>

</html>

Declare a variable, assign a value to it, and display it

<!DOCTYPE html>

<html>

<body>

<script>

var firstname;

firstname="Hege";

document.write(firstname);

document.write("");

firstname="Tove";

document.write(firstname);

</script>

<p>The script above declares a variable,

assigns a value to it, displays the value, changes the value,

and displays the value again.< /p>


</body>

</html>

Engineering

Java script programms