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. An example is sitting above.

Getting Started

Open up a web page in KompoZer 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">

  <!--

  // Clock function definition
 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);

  }

  //-->

  </script>

Copy and paste the following JavaScript code into the <body> of your web page in the location where you want the time to appear.

<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">

  <!--

  // Clock action code
 startclock();

  //-->

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