Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

The function getPath() accepts the URL of the current document. This includes all portions of the URL, including “http://…” and the name of the file. The function returns the URL up to the filename, not including the filename but including the last slash. For example, consider the following URL:

http://www.netscent.com/index.html

Upon acceptance of this string, the function would return:

http://www.netscent.com/

At this point, pay no attention to the statements inside functions. These are explained later on in the book. For now just understand what the functions do.

The first function in the script, setClock(), actually creates the clock, from top to bottom. Notice that each portion of the function is explained by a comment. Take a look at the following statements, taken directly from the function:

var openImage  = "<IMG SRC=\"" + getPath(location.href) + "dg"
var closeImage = ".gif\" HEIGHT=21 WIDTH=16>"

In this script segment, two constant-like variables are declared and initialized a meaningful value. The first is assigned the opening structure of an <IMG> tag in HTML. Note that location.href is the current URL of the document. Notice also the use of escape sequences (\”). If the URL is http://www.netscent.com/index.html, then the value assigned to openImage is <IMG SRC="http://www.netscent.com/dg. The value assigned to closeImage is independent of local influences such as the URL of the document. It simply assigns the value .gif\" HEIGHT=21 WIDTH=16>. The HEIGHT and WIDTH attributes are based on the actual height and width of the digit images used to display the time.

Here is the following portion of the script:

var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""

This section has two important tasks:

  1. It assigns the local hour to hour.
  2. It assigns the minute attribute of the current time to minute.

There is obviously no need to explain how, but if you do not remember, read through this chapter once again.

The following script segment simply modifies the value of hour according to the regular conventions used in the United States and other countries using 12-hour clock systems. First of all, noon is considered PM. Furthermore, midnight is written 12:00, not 0:00.

Take a look at the following statement:

if (minute < 10)
   minute = "0" + minute // do not parse this number!

This statement makes sure that the minute attribute holds a two-digit number. That is, if it is originally a one-digit number, a leading “0” digit is placed. Notice that this digit is actually a string. Attempting to parse this string with a function such as parseInt() would convert it to a numeric type, causing its value to change, because it is written in octal notation (leading 0). It must keep the string value throughout the entire script.

The following two statements in the script cast the value of minute and the value of hour to strings by concatenating an empty string to them. This is important, because string properties, which can only be used on strings, are used later on in the script.

The following statement is a loop:

for (var i = 0; i < hour.length; ++i) {
   text += openImage + hour.charAt(i) + closeImage
}

The loop executes hour.length times. That is, if hour is a two-digit number, the loop executes twice, once for each digit. During each execution, an image tag corresponding to the current digit in the string, the value of hour, is being concatenated to text. For example, if the value of hour is 12, the loop’s command block executes twice. During the first execution, the following string is assigned to text:

text += '<IMG SRC="http://www.netscent.com/dg1.gif" HEIGHT=21 WIDTH=16>'

During the second pass through the loop, this equivalent statement is executed:

text += '<IMG SRC="http://www.netscent.com/dg2.gif" HEIGHT=21 WIDTH=16>'

If the value of hour is a one-character string, the loop obviously executes only once.

The following statement in the script is:

text += openImage + "c.gif\" HEIGHT=21 WIDTH=9>"

This statement simply assigns the tag associated with the colon image. Notice that closeImage is not concatenated in this statement because this image’s WIDTH attribute is different from the other images.

The following loop is exactly like the one described earlier associated with the variable hour. It only differs in that it relates to the variable minute.

The AM or PM image tag is assigned to text, according to the value of ampm.

The final statement inside the function instructs JavaScript to return the value of text, the accumulative string of all the HTML tags needed to print the clock. The returned value is printed to the document by a global statement—document.write(text).


Figure 14-5.  No CGI, no Java, just a JavaScript script used to generate such an effect.

Digital Date

This example is similar to the previous one, except that it displays a set of images associated with the current date, rather than the time.


Fig 14-6.  A calendar based on HTML tables printed via JavaScript.

It is based on the same functions, so we shall spare the explanation. Refer to the comments inside the script for some short explanations. Here is the script:

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us