Writing Content

• Often useful to show on a web page when it was last modified / updated.
• Easy to do if you only have a few pages.
• Easy to forget if you have a lot of pages or make frequent changes.

document.lastModified provides the last modification time.

Can simply include this with:

document.write("<p class='lastmodified'>",
               "Last Modified: ", document.lastModified,
               "</p>");

Result

Note that formatting will vary depending on the browser - you have to work harder to get something consistent!

[Download]

Instead we can hide our email in a piece of JavaScript:

Code

// JavaScript
function printem(name, domainName, character)
{
   var emAddress = name + "@" + domainName;
   
   emAddress = emAddress.replace(RegExp(character, "g"), ".");
   /* alert(emAddress); */
   
   document.write("<span class='em'>");
   document.write("<a href='mailto:" + emAddress +"'>" + emAddress + "</a>");
   document.writeln("</span>");
}

printem("andrew", "bioinf#org#uk", "#");

[Download]

Result

• Often useful to have a banner containing information on the next event in a series
• It's a pain to remember to update this!
• Could do it automtically with a CGI script
• Easier with JavaScript

The process is as follows:

• Create an array with the events and their dates
• Check the current date
• Display the first event with a date after the current date

Code

// JavaScript

// Define Events
var gEvents = new Array();
gEvents.push(new eventdate( 1,  2, 2020, "Event 1"));
gEvents.push(new eventdate(15,  2, 2025, "Event 2"));
gEvents.push(new eventdate( 1, 10, 2025, "Event 3"));

// Display the next event
displayNextEventdate();

/* Creates an eventdate object containing the date and title of an event */
function eventdate(day, month, year, title)
{
   this.date = new Date(year, month-1, day, 18, 0, 0);
   this.title = title;
}

/* Main routine to print the next event */
function displayNextEventdate()
{
   // Find next eventdate
   var nextEvent  = new nextEventdate();
   var simpledate = new simplifyDate(nextEvent.date);
   
   // And write it out
   document.writeln("<div id='nextevent'>");
   document.writeln("<span class='announce'>Next Event:</span>");
   document.writeln("<span class='eventdate'>");
   document.writeln(simpledate.text);
   document.writeln("</span>");
   document.writeln("<span class='eventtitle'>");
   document.writeln(nextEvent.title);
   document.writeln("</span>");
   document.writeln("</div>");
}

/* Looks through the array of events and finds the next one */
function nextEventdate()
{
   var today = new Date();

   this.date  = "";
   this.title = "Sorry, no more events have been scheduled";

   for(var i in gEvents)
   {
      if(gEvents[i].date.getTime() >= today.getTime())
      {
         this.date  = gEvents[i].date;
         this.title = gEvents[i].title;
         break;
      }
   }
}

/* Simplifies the date into a British format string */
function simplifyDate(datestr)
{
   var month = Array();
   month[0]  = "Jan";
   month[1]  = "Feb";
   month[2]  = "Mar";
   month[3]  = "Apr";
   month[4]  = "May";
   month[5]  = "Jun";
   month[6]  = "Jul";
   month[7]  = "Aug";
   month[8]  = "Sep";
   month[9]  = "Oct";
   month[10] = "Nov";
   month[11] = "Dec";

   if(datestr == "")
   {
      this.text = "";
   }
   else
   {
      var year = datestr.getYear();

      // Some MIE versions give a 2 digit year. Other versions of MIE
      // and older Netscapes give a 4 digit year while Netscape >=4.70 gives
      // years since 1900 (i.e. 2000 ==> 100)
      if(year < 80)
      {
         year += 2000;
      }
      else
      {
         if(year < 1900)
         {
            year += 1900;
         }
      }
      this.text = datestr.getDate() + "-" + month[datestr.getMonth()] + "-" + year;
   }
}

[Download]

Result