Sunday, April 24, 2005
The Primer #3 Script, Part 2
Blog Entry #6
We continue today with our discussion of HTMLGoodies' JavaScript Primers #3 and the Date object-focused script, reproduced below, that is its highlight. In our last episode, we 'microscoped' the RightNow = new Date( ); constructor statement, which allowed us to create a new Date object. With no further ado, let's get to the meat of the script, a single document.write( ) statement whose write( ) parameter contains an alternating series of (a) text-string and (b) Date_object_name.method( ) command-statement subparameters.
<SCRIPT LANGUAGE="JavaScript">
//This script posts the exact day
//and time you arrived
RightNow = new Date();
document.write("Today's date is " +
(RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-"
+ RightNow.getFullYear() + ".
You entered this Web Page at exactly: "
+ RightNow.getHours() +
":" + RightNow.getMinutes() + " and "
+ RightNow.getSeconds() +
" seconds")
</SCRIPT>
The subparameters of the write( ) parameter are connected, or concatenated, with a + sign, which functions here as a string operator. Commas can also serve as (sub)parameter delimiters; confer, for example, the document.write( ) statement in the error-laden Primer #2 assignment script, which should now look much less mysterious.
Joe cautions us not once but twice that the document.write( ) statement of the Primer #3 script "should be all on one line", and it's true that the script as typed above will throw an error, but one minor change puts things to right. In the wake of our discussion of line-breaks in JavaScript, we can quickly zero in on the problem: the ". You entered this Web Page at exactly: " text string is split between two lines. Unsplit this string, by putting it on one line, and then the script will run, in spite of its "sectional" appearance.
Three of the six command statements appearing in the write( ) parameter feature Date object methods that return date-related information: the getMonth( ), getDate( ), and getFullYear( ) methods. The getDate( ) method starts counting at 1, in an exception to the rule that JavaScript usually starts counting at 0 (starting at 0 is "a C thing", according to Webmonkey), but is otherwise straightforward, as is the getFullYear( ) method. The getMonth( ) command, however, deserves a bit of comment.
The getMonth( ) method starts counting at 0 (January), running to 11 (December), so 1 must be added to the getMonth( ) return if we want the displayed month number, written to a Web page with the document.write( ) command, to correspond to the 'normal' month number. As you might expect, addition in an arithmetic sense is also accomplished with a + sign operator, so we would write
getMonth( ) + 1
to display April, to use the current month, as 4 and not 3. Joe surrounds his getMonth( )+1 expression with a set of parentheses "so that the [arithmetic] plus sign wouldn't get confused with the [concatenation] plus signs linking everything together" - is this necessary?
Indeed it is, if we delimit the subparameters of write( ) with + signs. When I removed the outer (getMonth( )+1) parentheses and reran the script, 1 was concatenated, and not added, to the getMonth( ) return, giving "31" (and not 4) for April. On the other hand, when I replaced the concatenation + signs with commas, I found that getMonth( ) and 1 are added with or without the outer parentheses. And for the sake of completeness, I finally found that if 1 is put in quotes, converting it from a number data type to a string data type, then getMonth( ) and "1" are concatenated with or without the outer parentheses.
Three of the six command statements appearing in the write( ) parameter feature Date object methods that return time-related information: the getHours( ), getMinutes( ), and getSeconds( ) methods. The getHours( ) return follows the 24-hour clock ("military time"), starting at 0 for midnight and running to 23 for 11 PM. The getMinutes( ) and getSeconds( ) returns run from 0 to 59, similar to but not quite the same as a normal digital clock, whose first ten minute and second readings go from 00 to 09. (We'll get to a bona fide digital clock JavaScript script in Script Tips 25-28.)
As intimated by the primer, the capitalization pattern of these methods must be followed or you'll get an error. 'RightNow.getmonth( )', for example, will generate "object doesn't support this property or method" and "RightNow.getmonth is not a function" errors (once again) with MSIE and Netscape, respectively.
Quick comments on other issues
The getDay( ) method
A fourth date-related Date object method, getDay( ), gets a mention in the primer but does not appear in the script. The getDay( ) return runs from 0 (Sunday) to 6 (Saturday), as correctly stated on the HTMLGoodies JavaScript methods keyword reference page, NOT from 1 to 7, as incorrectly stated both in the primer and on the "Click Here For What You've Learned" getDay( ) page.
An interesting application of the getDay( ) method: it can be used to determine on what day of the week famous historical events of the past took place. For example:
<script language="javascript">
var date = new Date("September 17, 1787");
document.write( date.getDay( ) );
</script>
returns 1, telling us that the U.S. Constitution was signed on a Monday.
Commenting
Just before the RightNow = new Date( ); constructor statement, the primer script begins with 2 "comment" lines of text:
//This script posts the exact day
//and time you arrived
Comment lines are recognized by the browser as a non-executable part of the script - they are an 'aside' from the scriptwriter, usually (but not necessarily) relating to the script. The double slash format for commenting out single lines is discussed in the primer ("What's That // Thing?"); for commenting out >1 line, JavaScript uses a /*...*/ format that is discussed on the "Click Here For What You've Learned" Comment page and that also seems to be a C thing.
Comments do not have to be placed at the beginning of a line, but can colinearly follow a command, for example:
RightNow = new Date( ); //this is a constructor statement
It's important to emphasize that this double slash commenting business only works inside of a script. If used outside of a script, both the slashes and what follows will display on the page. The HTML <!--...--> format can be used for comments outside of a script, and is sometimes used inside of a script to comment it out for non-JavaScript-capable browsers, but I would think that just about everybody is using a JavaScript–capable browser in this day and age.
"Adding Spaces"
Joe alleges in this section that n consecutive spaces in a JavaScript text string will display as n consecutive spaces on a Web page. On my computer, however, I find that JavaScript in this situation behaves like HTML, namely, n spaces translate to 1 space. To display more than one space in a row, I have to use a series of commands, i.e., when I type:
"This is the date ", it displays as "This is the date ", but
"This is the date " displays as "This is the date ".
I'm not going to comment on the primer's concluding "A known concern:" section, which IMO unnecessarily complicates the getMonth( ) method, and a careful reading of the end-of-primer assignment and its answer didn't raise any red flags for me, so I think we'll pack it in for our discussion of Primer #3. In HTMLGoodies' JavaScript Primers #4, we'll start talking about event handlers, a JavaScript part of speech that lies at the heart of JavaScript's use in creating dynamic, user-interactive Web pages.
reptile7
- posted by A. Peak @ 3:12 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)