|
JavaScript Tip:
Make A Date With JavaScript
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
JavaScript is a handy, low-impact way to add interactivity to Web sites. One of its coolest features is the ability to manipulate dates. We'll show you a couple of simple date-handling scripts that make your page seem more current and useful to visitors.
JavaScript Date And Time Rules
The JavaScript DATE object controls both dates and times. You can use it to format dates, create new date objects, and perform calculations. The DATE object doesn't have any properties and you'll have to create a new one each time you need to store a date.
Create a new DATE object using the NEW keyword:
Today = new Date();
Anniversary = new Date("March 21, 1992")
"Today" stores the current date because you haven't defined any parameters, while "Anniversary" stores a date you provide.
Read a more complete discussion of the DATE object - and see another cool script - in our Javascript Story - Generate Excitement With A Countdown JavaScript tip.
Now let's try a simple script that uses the DATE object.
Today's Date Is…
This script displays the current date on your Web page and formats it as "Month date, year" (like January 1, 2002).
Include this code in your page's HEAD section:
This sets up arrays with the actual days of the week and month names and defines a function called printDate(). Refer to the function in the BODY section of your document wherever you'd like to include the date:
<p>
<SCRIPT LANGUAGE="JAVASCRIPT">printDate()</SCRIPT>
</p>
We've used it here:
Get Fresh With Visitors
Visitors want to know that they're getting up-to-date, reliable content from a Web site. They can use a bookmarklet to check page freshness, but why force them to? If you haven't updated your page since disco was popular (the first time), then just admit it to your visitors.
This little script doesn't use the DATE object, but we're including it because it is date-related and some subscribers have asked how to do it. Insert this code into the BODY section of your document wherever on the page you'd like it.
You can include HTML code inside your document.write statement if you want the last updated message to display in bold or in a different color than the surrounding content. Be careful: it's easy to make mistakes when you do that, so consider using style sheets instead.
On this page, we created a special class called "update" and applied that class to the paragraph containing the code.
Place this in the HEAD section:
<style type="text/css">
.update
{
color:red;
font-weight:bold;
}
</style>
And in the BODY section:
<p class="update">insert the JS code from above here</p>
Here's how it looks on this page:
More About JavaScript
You can do a lot more complicated calculations with JavaScript dates than what we've shown you in this story.
If you'd like more information and access to other JavaScript techniques, check out these resources:
There are a lot of other JavaScript resources available too, but browse through these to get an idea of just how useful JavaScript can be.
But don't get so taken with stunning JavaScript and DHTML effects that you forget site usability and accessibility issues. Remember that many people surf with JavaScript turned off in their browsers - often trying to avoid annoying pop-up windows - and visitors who are using assistive technologies may not have JavaScript-capable browsers at all.
If you're considering using JavaScript to display really important site information, do this simple test first. Turn JavaScript off in your browser and see how the page looks and works. You may find that your navigation system has shut down, special offer pop-ups don't appear, or other unexpected problems.
And always remember that JavaScript isn't the only culprit when we're discussing page display problems. Even a simple HTML coding error like a misplaced INPUT tag can break your page completely in one browser even though it looks great in others.
Check your pages with NetMechanic's HTML Toolbox. It scans your site and identifies browser-specific code, slow-loading pages, broken pages, and HTML code errors. Best of all, Toolbox will repair your page and give you a corrected file that you can upload to your site.
|
