Current Time:

Adding Javascript to your page


Adding Javascript is by far the easiest of the three methods to add since all that we will be doing is adding our javascript program directly to our html. For this part, we will be adding a simple javascript clock to one of your pages.

Getting Started

Open up a web page in NVU on which we can add the javascript clock. You can either use a page you have already created or you can create a new one. In either case, be sure that you provide a link from your index.html page to the page that contains the javascript.

Organization

Most javascript programs have two parts (although not always). One part must be placed somewhere with the head tags of your web page. The other must be placed with the body tags in the location that you would like it to appear on your page.

Copy and Paste

Copy and paste the following Javascript code into the <head> of your web page.

<script type="text/javascript">
<!--
// COMMENT

function startclock()
{
var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var AorP=" ";
if (nhours>=12)
    AorP="P.M.";
else
    AorP="A.M.";
if (nhours>=13)
    nhours-=12;
if (nhours==0)
 nhours=12;
if (nsecn<10)
 nsecn="0"+nsecn;
if (nmins<10)
 nmins="0"+nmins;
document.forms.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP;
setTimeout('startclock()',1000); }

// COMMENT
//-->
</script>

Copy and paste the following Javascript code into the <body> of your web page.

<form action="#" id="clockform" name="clockform">
<div>
Current Time: <input type="text" id="clockspot" name="clockspot" size="15"></input>
</div>
</form>
<script type="text/javascript">
<!--  
// COMMENT

 startclock();
// COMMENT
//-->
</script>

Publish your web page and open it up in a browser window to verify that it is working correctly.


There are lots of places available on the web to find javascript that you can add. Below I list a few of the many you can find with a simple google search.
As a final note, you only want javascripts. There are things out there called Java Applets that you could also learn to put on your page and are equally fun but require a different set of instructions.


Return to Web Development III