Tuesday, May 20, 2014
A Basic Visual upon Your Arrival
Blog Entry #320
The Scripts that Display Text script collection of the Java Goodies JavaScript Repository contains a "You Came In..." script that I thought we might discuss in today's post. Authored by Joseph Cosentino in 1998, the You Came In... script outputs a display of the form:
"Been there, done that. We could bang out something like this in our sleep at this point," you are thinking, and you would be right. The You Came In... script is nonetheless noteworthy because its business end is actually a VBScript (Visual Basic Scripting Edition) script and not a JavaScript script. Joe warns the reader that the script is MSIE 4.0 ONLY but doesn't say anything at all about its
language="vbscript" - a smoking gun that Joe is working on the Windows platform vis-à-vis the Mac platform, with which VBScript is not compatible.Joe's You Came In... script demo doesn't work for me but it might work for you if you're using IE on a PC, so if that's your situation then go check it out. The script itself can be accessed here.
VBScript and JavaScript have a lot in common, and the You Came In... script's script element code should make intuitive sense to you; most of that code can be readily deconstructed with a little help from our friends:
(1) Microsoft's VBScript documentation is ground zero for all things VBScript.
(2) The W3Schools VBScript Tutorial is also useful.
Structure and presentation
The outputted text is framed by a one-row, one-cell table, and styled with a font element.
<table border="3" width="100%" bgcolor="#000080"><tr><td align="center" bgcolor="#000080">
<font color="#ffffff" face="Arial,Geneva,Helvetica" size="2">
<script language="vbscript"><!--
...
//--></script></font></td></tr></table>Is there any reason we should be using a table here vs. a div? No, there isn't. Moreover, the presentational attributes of the table, td, and font elements can be smoothly rolled into a single style rule.
#dateDiv { border: outset 3px; background-color: navy; text-align: center; color: white; font-family: Arial, sans-serif; }
/* Arial, Geneva, Helvetica? Overkill. And size="2" is too small for my taste. */
...
<div id="dateDiv"></div>Date and its discontents, part 2
Let's get the VBScript action going, shall we?
d = weekday(date)The script element's first statement
(1) gets the current date by calling the Date function and then
(2) feeds that date to the Weekday( ) function, which returns an index representing the current day of the week, and
(3) assigns the Weekday( ) index to a d variable.
More specifically, the Weekday( ) function (like the Month( ), Day( ), and Year( ) functions, vide infra) acts on a date argument that can be "any expression representing a date". Once upon a time Microsoft's VBScript materials featured a glossary that provided a date expression definition; the MSDN Library inexplicably no longer hosts this glossary but you can still find it floating around the Web - the good folks at Commodity Systems Inc. have posted it here, for example - so for the record, a date expression is:
Any expression that can be interpreted as a date. This includes any combination of date literals, numbers that look like dates, strings that look like dates, and dates returned from functions. A date expression is limited to numbers or strings, in any combination, that can represent a date from January 1, 100 through December 31, 9999.Other notes
Dates are stored as part of a real number. Values to the left of the decimal represent the date; values to the right of the decimal represent the time. Negative numbers represent dates prior to December 30, 1899.
• VBScript keywords (
date, weekday, etc.) are case-insensitive.• Note that
date is not followed by parentheses (although you can put them there if you want).• The Weekday( ) return runs from 1 for Sunday to 7 for Saturday and thus does not quite match that for JavaScript's dateObject.getDay( ) method, which ranges from 0/Sunday to 6/Saturday.
• VBScript statements are terminated with carriage returns and not semicolons.
(The Date object page of the Mozilla JavaScript Reference provides links to pages that describe the Date object methods mentioned in this section.)
Subsequently an if...then...else construct maps d onto a corresponding text string and then assigns that string to a today variable.
if d = 1 then
today = "Sunday"
elseif d = 2 then
today = "Monday"
...
elseif d = 7 then
today = "Saturday"
end ifAfter that we have an analogous chunk of code that gets the current date again, feeds the date to the Month( ) function, which returns an index representing the current month, assigns the Month( ) index to an m variable, conditionally maps m onto a corresponding text string, and assigns that string to a mon variable.
m = month(date)
if m = 1 then
mon = "January"
elseif m = 2 then
mon = "February"
...
elseif m = 12 then
mon = "December"
end ifThe Month( ) return runs from 1 for January to 12 for December and is thus slightly out of sync with that for JavaScript's dateObject.getMonth( ) method, which ranges from 0/January to 11/December.
The
<script> concludes with document.Write commands that get the date, year, and time parts of the display, splice the date/time components with various strings, and write it all to the page:document.Write "<b>You entered this site on"
document.Write " " & today & ", " & mon & " " & day(now) & " " & year(date)
document.Write " at " & Time( )There is no mention of the document object on Microsoft's VBScript Objects and Collections and Write Method pages, although this page makes clear that the document object is part of the VBScript API. The Write arguments can be surrounded with parentheses if desired.
The Day( ) function corresponds to JavaScript's dateObject.getDate( ) method. The author could have fed
date to the Day( ) function but instead reached for the Now function, which returns the current date and time as a string of the form:5/19/2014 1:33:29 PM
Evidently the Now return is good enough of a date expression (vide supra) for our purposes.
The Year( ) function corresponds to JavaScript's dateObject.getFullYear( ) method. The Time function, whose call does not need to be followed by parentheses, returns the current time as a string of the form 2:06:09 PM and is approximately equivalent to JavaScript's dateObject.toLocaleTimeString( ) method (I say "approximately" because the toLocaleTimeString( ) return varies a bit from browser to browser).
As you would guess, the
& characters serve as concatenation operators. FYI: VBScript does have a + operator that can be used to concatenate two strings but not a string and a number (as we're doing here).Escape from IE for Windows
Could the You Came In... VBScript be tightened up a bit? Sure, but it's not worth our while to do that given VBScript's IE-only support. So let's wrap up this post with a quick 'translation' of the You Came In... VBScript into JavaScript:
(1) Set up arrays of weekday/month name strings that map onto the returns of the Date object's getDay( ) and getMonth( ) methods.
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];(2) Fetch the current
Date( ) and piece together a corresponding dateString for the You Came In... display.var myDate = new Date( );
var dateString = "You entered this site on " + dayArray[myDate.getDay( )] + ", " + monthArray[myDate.getMonth( )] + " " + myDate.getDate( ) + " " + myDate.getFullYear( ) + " at " + myDate.toLocaleTimeString( );(3) Set the dateDiv div's innerHTML to the dateString.
window.onload = function( ) { document.getElementById("dateDiv").innerHTML = dateString; }That'll do it, folks.
- posted by A. Peak @ 3:54 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)