Lesson 8-Live clock and dynamically writing out html example
We will now attempt to show an example of each of the two concepts we hd learned last lesson-using the date object, and dynamically writing out html.
Adding a live clock
with the help of a form
Adding a live clock using forms is quite simple...the basic concept is to continuously write to the form every 1 second, using the updated time from your own computer. Last section, we already discussed the essence of how to achieve calling a function continuously (by using the setTimeout function in a special manner) -now all we need to do is use that knowledge.
//clock
<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
function show()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12)
{
dn="PM"
hours=hours-12
//this is so the hours written out is in
12-hour format, instead of the default 24-hour format.
}
if (hours==0)
hours=12
//this is so the hours written out when
hours=0
(meaning 12a.m) is 12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=hours+":"+minutes+":"
+seconds+" "+dn
setTimeout("show()",1000)
}
show()
You, by no means, have to use a form when implementing your clock, but a form has many advantages: it is easy to add to your code, and more importantly, since all it does it "write" to a form, there is virtually no delay in time every second as it writes a new value to the text form. However, with images, that's a little different. Why? as each second goes by, it has to load a new image in place of the old, and it has to do that in merely one second, with fluid transition. Is is possible? Of course! (assuming the image is not tooo big) This leads naturally into our next lesson: JavaScript with images, the key to mouseover, mouseout effects.
Dynamically writing out
html example: To watermark or not to watermark?
Dynamically writing out html using JavaScript is very important-and powerful. In the last lesson, we showed how we could dynamically display one of the two images, depending on the day of time. The basic concept of dynamically writing out html is amazingly simple:
The concept may seem simple, and it is, but please realize that it is very useful and powerful! What you may have not realized is that, using JavaScript, you can dynamically write out any html code, yes, even the <html> tag itself!. All you need to know is html itself, and the document.write method of JavaScript to accomplish amazing things...
Lets have a look at another example that involves writing out the body tag dynamically. If you are using Microsoft Internet Explorer, you should be familiar with the concept "watermark" background. In essence, it is a background image of a document that does not tile itself beyond the first screen, and stays static when the rest of the document scrolls up and down. Using watermarked backgrounds, you can have one big image that sits behind the background, and will not repeat itself to fit the entire document, creating a very unique and often beautiful look. However, many people are reluctant to use watermark backgrounds, since when Netscape users drops by, they will see one large image that is eager to reproduce itself-very ugly and unprofessional. Lets see an example
Now, as you can see if you're using Netscape, the background tiles, which is really not that suitable, since its such a large "single" image. By using JavaScript, however, we can easily control that, by dynamically using different backgrounds, depending on the browser type. Before we do so, however, lets see the syntax of adding basic backgrounds, and watermarked backgrounds:
<body
background="regular.gif">
//"regular" backgounds
<body
background="watermark.gif" bgproperties="fixed">
//watermarked background. Works with Internet Explorer.
Ok, now that we know the syntax, we can easily use the "document.write" method to dynamically write out the background html code, depending on browser type:
<html>
<head><title>watermark improved</title></head>
<script>
document.write("<body
background=")
if (navigator.appName=="Microsoft Internet Explorer")
document.write('"watermark.gif" bgproperties="fixed">')
else
document.write('"regular.gif">')
</script>
"
"
text here
"
"
</body>
</html>
Don't worry so much about how we tested for browser type, that's talked about in Lesson 10. Simply concentrate on how we dynamically wrote out the <body> tag itself, changing the way a document implements a background, depending on browser type.
No one is convincing you that you should now start to use watermarked backgrounds-I don't like to do so myself, since a watermarked background has to be almost as large as an entire screen to achieve its effects, which translates to long downloading time. The point here is that JavaScript adds a lot of versatility to your html document-the hell with static html tags, JavaScript's taking over!
