Javascript : Set Time in Title




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2014 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
  • <html>
    <title>Example of a link </title>
    <body>
    <table border>
    <a href="http://sumtotalz.com/TotalAppsWorks/Javascript/JS_Title_Time.html">
    Time in the Title </a>
    </table>
    </body>
    </html>

JavaScript Table of Contents

How to write a Javascript program that sets the time in the title bar

The purpose of this tutorial is to show you how to write today's date in the title bar of your browser. It also assumes you are familiar with the JavaScript Date Methods. What is Javascript? JavaScript is a scripting language that is frequently used for client-side web programming. This tutorial assumes that you have mastered the basics of HTML. In the following example, we will show you the code for our date in the title bar program. Before we get started, what are the requirements for our date in the title bar program?

Requirements for a Javascript program I that sets the time in the title bar

The requirements for this tutorial are:

  1. Use the JavaScript Date Object to get today's date.
  2. Once you get today's time, insert it in the title.

What is a JavaScript Date Object?

The JavaScript Date object is responsible for JavaScript's date and time handling. The following table contains the Date object methods and a brief description of its function.

Date Object Methods
Method Description
Date() Returns today's date and time
Figure 1: Date() object

How do you use the JavaScript Date method?

Figure 2 shows you how to use the Date object. A variable named myDate is created and the date values are stored in it.

Date Object Methods
Example of Using Date code Demo of Date code
<html>
<head>
<script type="text/javascript">
function get_Date() {
   var myDate = new Date();
   document.getElementById('datetxt').innerHTML=
     "Value of myDate object is   " + myDate
   alert( "Value of myDate is " + myDate  ) ;
}

</script>
</head>
<body>
<button onclick="get_Date()"> Value of myDate is </button>

<div id="datetxt"> </div>

</body>
</html>








Figure 2: Date() object


The result of pressing the above button is shown below.



At this point, we have not satisfied the requirement to show the time in the title. We need to determine how we should modify the example in Figure 2 to satisfy the requirement.

Date Object Methods
Example of Using Date code Demo of Date code
<html>
<head>
<SCRIPT Language="JavaScript">
<!-- Hide


var titleText ;
var ampm ;
var buildTitle = document.title + " " ;

function CalcRegTime() {
   if ( hr >= "12" ) {
      ampm = "P.M." ;
   }
   else {
      ampm = "A.M." ;
   }

   if ( hr > "13" ) {
      hr = hr - 12 ;
   }
}

function padZero() {
   if (min < "10") {
      min = "0" + min ;
   }

   if (sec < "10") {
      sec = "0" + sec ;
   }

   if ( hr < 10) {
      hr = "0" + hr ;
   }
}

function getTime() {
   adate  = new Date() ;
   hr     = adate.getHours() ;
   min    = adate.getMinutes() ;
   sec    = adate.getSeconds() ;
   ampm="A.M."  ; 
}

function updateTime() {
   getTime() ;
   CalcRegTime() ;
   padZero() ;
   var scroller = "TIME: " + hr + ":" + min + 
                  ":" + sec + " " + ampm ;
   var timeout = setTimeout("updateTime()", 1000) ;
   document.title=buildTitle + titleText ;
}

//-->
</SCRIPT>
</head>

<button onclick="updateTime()"> Set time in title bar </button>


</body>
</html>










Figure 3: Date object in the the title bar


In the above example, we used the following tags and properties.

  1. <head> - start of the header content of the HTML document.
  2. <script LANGUAGE="JavaScript"> - indicates the start of the JavaScript content.
  3. function get_Date2() - function key word declares the start of the get_Date2()
  4. function setdate() - function key word declares the start of the setdate()
  5. </script> - start of the interpreted script program.
  6. </head> - end of the header content of the HTML document.
  7. <body> - start of the body content of the HTML document. This is the content that is visible to the user.
  8. <button - start of a button declaration
    • OnClick="get_Date2();" - indicates that a switch to the function get_Date2() if this button is clicked.
  9. </body> - end of the body content of the HTML document.

Feel free to copy and paste the code in Figure 1, 2 or 3 into a source file.










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2014 All Rights Reserved Total Application Works