Dialog Boxes & The Status Bar
<font color="#ff0000" size=5>WebTV JS "Bug" - Reload Page (cmd-r)</font>



As may have been recognized there are two types of objects: those that are built into the browser and those that may be defined by the user. Each of these have elements which can be arranged in a hierarchy of methods and properties. Those which are developed by the user may be the easier to grasp and make use of than those which are pre-existent. At least these can be named and their purposes understood in terms of a problem at hand. The built-in objects have to be stated and their purposes learned by application. Another group of familiar built-in objects will be examined in this section.

Pop-Up Boxes


There are three types of pop-up boxes which may be a part of a JS browser. One is a simple alert which provides an informative message. Another provides a message and allows the option of continuing or lnking elsewhere. The third can accept input and make use of it.

"Alert" Pop-Up This is illustrated by the statement below:

<script>
var txt=“Interrupt. ‘Back’ to continue”
alert(txt)
</script>


There is a button labeled "OK" which must be clicked to continue. Single quotation marks are used when a quoted word or expression is a part of a string variable, as in this message. String variables can be the argument (the part in the parentheses) in an "alert", but it is more convenient in coding to define them as variables. If the variable is not first defined yet still used as the argument in the alert" the pop-up appears with the word null, meaning the named storage location has nothing in it. Multiple alerts can be done by following one after another, taking care to end each with a semi-colon. This, though, is sure to soon annoy a viewer.

"Confirm" Pop-Up In this pop-up the message displayed is the argument in a "confirm" command. Two buttons are now shown. One, the "Cancel", when clicked will allow continuation. The other,the "OK", can be used to direct the viewer to another page link. In the example which follows it is to the previous page of this tutorial. Please return again to this section, if clicked.

<script>
function reply(){var txt=confirm(“Back a page??”);
if(txt)window.location=“URL for redirect”
</script>


It should be noted that it is not the form here that is the object, as in a pevious example, but rather a built-in object, "window", the location for which is given by the URL. An "if" statement is used to provide a branch. When "OK" is clicked the argument to the "if" is "true" and the link is made. When "Cancel" is clicked the argument remains "false" and the link step is skipped. This is a very convenient form of "true-false" input.

"Prompt" Pop-Up In this pop-up a text area is shown together with a message. This text area is a text-input statement. The script below takes whatever is entered in this area and places it as part of a string in an "alert" message.

<script>
function ans(){var txt=prompt("Want to go to dinner tonight?");
if(txt)alert("You said "+txt+"!! Sorry. Busy, tonight.")}
</script>
<form>
<input type="button" name="sample" value="Example" onClick="ans()">
</form>


It will be noted that a concatination is done to introduce the "alert" message. Concatination is very frequent in JS as variables are generally handled as strings. An "if" is included to skip the "alert" if no answer is given.

Pop-Up Uses Pop-ups can be used for things other than presenting informtion. They are, after all, accepting input. Used in combination in certain situations a "prompt" can be used as a means of entering data or going another route. When entered, the data can be manipulated in some way and, if necessary, a "confirm" may be inserted to allow a choice on progressing further.

An example of such an application is to use the "prompt" as input for an instant messenger. The code for this can be given as follows:

<script>
function mail()
{var to=prompt("e-Mail Address: ");
if(to)var sbj=prompt("Subject: ");
if(sbj)var ask=confirm("Do you want to address this e-mail to "+to+"?");
if(ask)parent.location.href=‘mailto:'+to+'no_signature=true&subject='+sbj+' ';}
<form>
<input type="button" name="sample" value="Example" onClick="mail()">
</form>


"Parent" is the only declaration allowed by WebTV in referring to something within their user's application of this type. Children are allowed, in general, but not with WebTV. In other words, just one HTML frame or JS window per viewing screen. An "if(true/false)" is placed after each pop-up statement to test if an entry has been made. The entry must be declared using "var" to clear any previous entry, essentially saying it is a new variable with the same name. With no entries, the effect is the same as "Cancel".


Status Bar


At the bottom of the viewing screen is a window called a status bar. Messages are displayed there upon going to various sites to indicate the action being taken or the page being viewed. These messages can be chosen to suit the page viewed. The one presented below serves only as an introduction. Other methods can give more sophisticated effects.

There can be confusion with the word "window". It may be used to describe an area on a page; it may be used to describe the page itself; and it may be used to describe the pages of other viewers. For this example it is the status bar at the bottom left of the viewing screen.

<script>
window.status="See? Right (left?) at the bottom."
</script>



An "Erase" button, an empty string as the message, is provided. Not a very active display at this moment, but with a few more new statements, which will be described shortly, this and the following example will be made to appear differently.

Window is a JS object, and can have methods and properties. Date, too, is an object and as will be shown later may be used to show the date and time in the status bar:

dday=Date();
window.status=dday;
</script>



This date display is instructive for a number of reasons. It shows the date is accessed in military time and the time displayed is the exact moment of its access. The clock is running in the browser (click "Example" again) but, it is seen, a more involved method must be used to show this and AM/PM time in the status window.

JS Test-Bed 1 - - JS Test-Bed 2



<< PreviousNext >>