Javascript : Set Date 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_Date.html">
    Date in the Title </a>
    </table>
    </body>
    </html>

JavaScript Table of Contents

How to write a Javascript program that sets the date 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 date 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 date, 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 date 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 type="text/javascript">

var aMonth  = new Array("January", "February", "March", 
                        "April", "May", "June", "July",
                        "August", "Septerber", "October",
                        "November", "December") ;
var aDay    = new Array("Sunday", "Monday" ,"Tuesday" ,
                        "Wednesday", "Thursday", "Friday", 
                        "Saturday", "Sunday") ;
var myDate  = new Date();
var Year    = myDate.getFullYear() ;
var thisDay = myDate.getDate();

function get_Date2() {

   if (document.all)
      setdate()
   else if ( document.getElementById )
      window.onload = setdate()
}

function setdate(){
   document.title="According to TAW. today\'s date is: " + 
                   aDay[myDate.getDay()] + ", " + 
                   aMonth[myDate.getMonth()] + 
                   " " + thisDay + ", " + Year + ""

}

</script>
</head>
<body>
<button onclick="get_Date2()"> Set date in title bar </button>

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

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