EW 1-3: Creating a Code Snippet

Create a page last updated code snippet.

One webbot that many people like to use in FrontPage is the last modified webbot.

Since webbots will not be available in the release version I put together this short article on how to display a last modified date on your web pages using JavaScript either as a code snippet or as an external JavaScript file.

Note that javascript last modified code will only accurately report the date for static HTML/XHTML pages and not those with dynamically generated content.

To create a last modified date for your web page in EWD to replace the FrontPage webbot you can use the following as a code snippet:

  <p>
  This page last updated: 
  <script type="text/javascript">
   document.write(document.lastModified);
  </script></p>

Which provides an output like this:

This page last updated: 08/26/2009 19:16:38

Creating a Code Snippet

To create a code snippet for the above last modified date JavaScript use Tools | Options to open the Page Editor Options and select the Code Snippets tab:

Code Snippet Tab

Use the add button to open the Add Code Snippet to the list above:

add code snippet dialog box

  1. Type the name you want to appear in the code snippet dropdown box. I used Last Modified Date but you may want to use something shorter.
  2. Provide a description of what the code snippet will do.
  3. Copy and paste the JavaScript from above with a pip [|] before and after the code snippet to mark where the text begins and where the cursor should be after insertion.
  4. When you are satisfied use the add button.

Using Code Snippets

To insert a code snippet you must be in code view or the code half of a split screen.

  1. Use Control + Enter at the location you want to insert the code snippet which launches the code snippet dropdown:
    select code snippet dropdown
  2. Scroll down until you see the code snippet you wish to use. In this case the “Last Modified Date” snippet and double click. Now you see why I suggested a shorter name might be a better choice to use.
  3. The dropdown will close and your code snippet will be inserted. The result will look like this:
    result of code snippet
  4. Make sure you place the code snippet where you wish it to appear.

External JavaScript File

If you would like a more attractive page like this:

 

An external javascript file was used and called on your page with:

<script src="format-last-modified.js" 
type="text/javascript"></script>

Alternatively, you could also use a code snippet for it that would look like this:

// JavaScript to create a nicely formatted last 
updated page
  if (Date.parse(document.lastModified) != 0) {
var modiDate = new Date(document.lastModified);
var monthName = new Array("January", "February", 
"March", "April", "May", 
"June", "July", "August", 
"September", "October", "November", 
"December");
document.write("Last modified: 
" + monthName[modiDate.getMonth()] + " ");
document.write(modiDate.getDate() + ", " + 
modiDate.getFullYear());
}

Download the format-last-modified.js as a text file above to create a code snippet or to use directly.

More advanced versions can be found on the net at places such as the one from Quirksmode.com (a good source for browser quirks information) at http://www.quirksmode.org/js/lastmod.html.



Outstanding Hosting