Tuesday, October 31, 2017
Triangles to Dates
Blog Entry #382
OK, what's next in the Calendars, Clocks, and Calculators (CCC) sector? Preceding the Money Conversion Script is an Area of a Triangle script that calculates the area of a triangle from window.prompt( )-gathered base and height inputs. The Area of a Triangle script code was authored by Greg "Dabomb" Bland and is available in unadulterated form at the JavaScript Goodies site here and is reproduced below in its entirety for your convenience.
<script language="javascript">
function area( ) {
var base = window.prompt("Enter the base of the triangle.");
var height = window.prompt("Enter the height of the triangle.");
var sum = (base * 0.5) * height;
window.alert("The area is " + sum + ". This was solved by using a = (1/2)bh."); }
function about( ) {
window.alert("This script was created by Greg Bland. dabomb@lorien.ml.org"); }
</script></head>
<body>
<form>
<input type="button" value="Area of Triangle" onclick="area( );">
<input type="text" name="areaf">
</form><font color="blue"><i><center>The above area( ) function is more or less identical to the triangle area-calculating areati( ) function of The Areas, a CCC script we covered in Blog Entries #361 and #362; that said, the Area of a Triangle script went live at Java Goodies about five months earlier than The Areas did.
In practice, the Area of a Triangle demo at the aforelinked triangle.html page works fine as far as it goes, although it doesn't place any validation-type constraints on the user's prompt( ) inputs. (If you input hello for the base and world for the height, then you'll get a The area is NaN output on the post-calculation alert( ) box.) I'm not going to give you my own Area of a Triangle demo but will instead direct you to the corresponding #triangleDiv demo in Blog Entry #362.
Code miscellanea
• There's nothing present that calls the about( ) function, but I trust you're up to the task of adding an about( )-calling button to the interface.
• The areaf text field is superfluous as things stand, but there's nothing stopping you from keeping that field and adding a second one for inputting the base and height respectively in place of the prompt( ) commands.
• Regarding the stray
<font color="blue"><i><center> markup at the end, if you do want to blue, italicize, and/or horizontally center some text on the page, then you should of course use a style sheet to do that.Returning to the CCC portal, the Area of a Triangle listing is followed by one for a Multiple Java Calendar script.
The Multiple Java Calendar link at the javagoodies.com/ccc.html page points to a javacalendar.html frameset
<frameset rows="35%,65%">
<frame name="frame1" src="js-caltop1.html" scrolling="no" marginwidth="0" marginheight="0" border="0">
<frame name="frame2" src="js-calbot1.html" scrolling="auto" marginwidth="0" marginheight="0">
</frameset>whose upper frame at one time held a js-caltop1.html document and whose lower frame at one time held a js-calbot1.html document; both of these documents now redirect to a developer.com/java portal.
Fortunately, the corresponding javacalendar.html frameset at JavaScript Goodies is still intact. Here's what we've got for a display:
(frame1) A one-row, three-cell table lays out the action part of the js-caltop1.html page. The right cell features a button for showing a calendar in the frame2 frame; the center cell contains controls for changing the calendar month and year; at no extra charge, the left cell sports an image-based digital clock, some of whose images are missing, and a date string for the current date.
(frame2) The js-calbot1.html page's only content is a styled This Is A Simple Calendar That You Can Change To Any Month Or Year You Want. text string.
The script calendar is actually assembled for the most part by a separate js-calbot2.html document that is loaded into the frame2 frame when the button is clicked. (Oddly, js-calbot2.html is still accessible at the Internet Archive.)
Some text below the aforementioned js-caltop1.html table identifies the script's author as "Haugh" and notes that the script's constituent files were originally bundled for download at http://www.geocities.com/SunsetStrip/Alley/1679/calender.zip, a resource that is now gone. However, I recently stumbled upon a http://www.pagetools.de/java/scripts4/kalend3/ page that provides the script files (minorly modified in places) both separately and as a kalend3.zip package. Danke schön, Pagetools.de!
Over and above the script's
(a) use of a frameset (vide infra),
(b) commingling of structure, presentation, and behavior, and
(c) getYear( ) calls (nope, the current year is neither 117 nor 19117),
the js-caltop1.html source is 'highlighted' by some major-league bloat and the most inscrutable block of JavaScript arithmetic I have ever seen. There's plenty here to keep us off the streets for the next several posts.
Let me wrap up this entry with some brief commentary on the javacalendar.html frameset itself:
• The HTML frame element doesn't have a border attribute, but it does have a boolean-like frameborder attribute whose value can be 1 (the default) or 0. To get rid of the frame1-frame2 separator, it is necessary to set the frameborder for both frames to 0.
• Much more importantly, HTML5 obsoletes the frameset and frame elements; we will replace the frame1 and frame2 frames with divs in due course.
- posted by A. Peak @ 5:34 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)