Friday, February 06, 2015
Quad Extras
Blog Entry #342
We return now to our ongoing analysis of the JavaScript Goodies Quadratic Equation script; in today's post we'll roll through the rest of the quad.html display.
The links
The qtable table is followed by a group of three links.
• [Home] • [E-mail] • [View Source]
/* From the script17.css style sheet: */
a:link { font-family: Verdana, Arial, sans-serif; font-size: 13pt; color: #2574d5; font-weight: 500; text-decoration: underline; cursor: default; }
a:visited { font-family: Verdana, Arial, sans-serif; font-size: 13pt; color: #2574d5; font-weight: 500; text-decoration: underline; cursor: default; }
a:active { font-family: Verdana, Arial, sans-serif; font-size: 15pt; color: #32cadc; font-weight: 600; text-decoration: none; cursor: default; }
a:hover { font-family: Verdana, Arial, sans-serif; font-size: 15pt; color: #32cadc; font-weight: 600; text-decoration: none; cursor: default; }
<center><font style="color:#2574d5;font-size:18pt;"><br><br>
ï [<a href="index.html" onmouseover="window.status='Home'; return true;" onmouseout="window.status=''; return true;">Home</a>]
ï [<a href="mailto:LayerThree@aol.com?subject="Quadratic Equation Script" onmouseover="window.status='E-mail'; return true;" onmouseout="window.status=''; return true;">E-mail</a>]
ï [<a href="view-source:http://members.tripod.com/~JavaSc/script17.html" onmouseover="window.status='View Source'; return true;" onmouseout="window.status=''; return true;">View Source</a>]
</font>Note that there are ï characters where the prefacing bullet points should be; of course, the proper way to code a bullet point is via a • character reference.
Clicking the • [Home] link will take the user to the index.html page (assuming it exists) of the current directory.
Clicking the • [E-mail] link will open the user's default email client and set up an email whose To: field is set to LayerThree@aol.com but whose Subject: field is blank and not set to Quadratic Equation Script, or at least that's what I see with the modern OS X browsers on my iMac.
Clicking the • [View Source] link should take the user to the source of a http://members.tripod.com/~JavaSc/script17.html page, which I suspect was Sam's own 'quad.html page' but which is no longer extant. I find that the view-source URI functionality works only with Firefox when working on the desktop (I can't vouch for what happens online).
The link group is horizontally centered by the
<center> element; a run of non-breaking spaces separates the • [Home] link from the • [E-mail] link and the • [E-mail] link from the • [View Source] link. The color and the size of the prefacing bullet points and of the square brackets that surround the link text are set by the <font style="color:#2574d5;font-size:18pt;"> element.Not mentioned earlier: the script17.css file begins with
<style type="text/css"><!-- and ends with --></style>. This markup shouldn't be there and it must be removed to apply the a:link style rule to the links; its presence causes the unvisited link text's(a)
font-family to be the browser's Preferences default/standard font (typically Times), (b)
font-size to be 18pt per the font element,(c)
color to be #0000ee per the browser's own "user agent stylesheet",(d)
font-weight to be normal per the initial value of the CSS font-weight property, (e)
text-decoration to be underline per the user agent stylesheet, and(f)
cursor to be auto per the user agent stylesheet.That said, the markup doesn't interfere with any of the other rules in the file as far as I can tell.
I prefer the larger
font-size:18pt; vs. the smaller font-size:13pt;; moreover, cursor:auto; gives a context-dependent cursor and cursor:default; doesn't, and therefore the former is a better choice for a link than is the latter. On the other hand, the #2574d5 color provides a better contrast with a black background than does #0000ee.In practice on my computer, the
a:visited style rule applies to the Home (http) link but not to the E-mail (mailto) and View Source (view-source) links; however, the a:link, a:active, and a:hover style rules apply to all three links.The
a:active and a:hover rules comprise the same set of declarations, and the former can be removed as it is effectively overwritten by the latter; if the declaration sets were different, it would be necessary to put the a:active rule after the a:hover rule to see the a:active stylings at the moment of link activation.Mousing over (
a:hover-ing) a link sets the link text's font-size to 15pt, changes its color to a lighter shade of blue (#32cadc), bolds it (font-weight:600; and font-weight:bold; give identical renderings, or at least I can't tell them apart), and subtracts its underline; per the link's onmouseover attribute, it would also have written the text string to the status bar once upon a time, but nobody seems to support window.status anymore.The time-date string
Several line breaks below the links we have a time-date string
5:00 P.M. | Tuesday, February 3, 19115
that is created and placed on the page by the time.js script.
<br><br><br><br><script language="JavaScript1.2" src="time.js"></script>The year part of the string is off because - you guessed it - Sam reached for the dateObject.getYear( ) method vis-à-vis the dateObject.getFullYear( ) method; I checked the latter with IE 4.5 and Communicator 4.61 in the SheepShaver environment and it worked fine.
Here's how we generate the various parts of the string (I have tightened up the original time.js code in various ways for the subsections below):
The hour of the day
var now = new Date( );
var hours = now.getHours( );
var part = (hours >= 12) ? "P.M." : "A.M.";
if (hours > 12) hours -= 12;
if (hours == 0) hours = "12";The time runs according to a 12-hour clock: the A.M.|P.M. part must be determined before the 13-23 and 0 hours are adjusted.
The minute of the hour
var minutes = now.getMinutes( );
minutes = (minutes < 10) ? (":0" + minutes) : (":" + minutes);A leading 0 is prepended to a minutes in the 1-9 range.
The day of the week
var dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var day = now.getDay( );
for (var i = 0; i < dayArray.length; i++) if (i == day) day = dayArray[i];A for loop converts the
now.getDay( ) day to a corresponding dayArray string.The month of the year
Analogously:
var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var month = now.getMonth( );
for (var i = 0; i < monthArray.length; i++) if (i == month) month = monthArray[i];The date of the month, and the year
var date = now.getDate( );
var year = now.getFullYear( );Assembly and output
/* From the script17.css style sheet: */
.time {font-family: Verdana, Arial, sans-serif; font-size: 13pt; color: #2574d5; font-weight: 500; text-align: center; }
var time = hours + minutes + " " + part;
document.write("<div id='timestamp' class='time'>" + time + " | " + day + ", " + month + " " + date + ", " + year + "<hr width='275'></div>");The changing and unchanging parts of the string are concatenated and the resulting string is loaded into an
id='timestamp' div (no use is made of the id), which is styled with a .time rule and written to the page. The document.write( ) command also writes a <hr width='275'> rule just after the div.The copyright.jpg image
The quad.html display concludes with a copyright.jpg image
<br>
<img src="copyright.jpg" alt="©1998 | sam s. lachterman | all rights reserved">
</body></html>or would conclude with a copyright.jpg image if one were present in the quad/ package, which there isn't, as noted two entries ago.
• The img placeholder is still part of the
<center> block (whose required </center> end-tag is missing, BTW) that follows the qtable table and is horizontally centered thereby.• The img alt text contains a literal © character, which should be encoded as ©.
The Quadratic Equation demos that I found on the Web dispense with the post-table stuff (OK, this demo does print out the ©1998 | sam s. lachterman | all rights reserved text at the bottom of the page, but otherwise...), and I don't particularly care for it, either - throw it out if you want.
We are at long last ready to solve a quadratic equation via the script17.js script, and we'll do just that in the following entry.
- posted by A. Peak @ 4:57 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)