|
Alerts & Prompts
Alert Box There are obviously many ways to interact with the user with
JavaScript. One of the most used ways would be in html created forms. Although
forms are not covered in this test, JavaScript can be a powerful companion for
one. Instead, a simpler method of communicating with the user will be discussed
in this test, alerts and prompts. For an example of an alert click here
(ALERT)
. You may have seen many of these in the past. Alert boxes are
very simple, however if you want to display a large amount of text on an alert
box, you may want to use a line break so that your alert box doesn't end up
looking like this.
(ALERT)
To see how to do this, view Figure 4.1 below. Simply use '\n'.
| Figure 4.1 |
<script
type="text/javascript">
alert("This text is on the first line" + '\n' + "This text is on the
second line")
</script> |
Alert boxes can be very useful for sending
important information to the user, but the same concept of boxes can be used to
gather information from the user via either a prompt or a confirm box. Both are
helpful in allowing a user to interact with a webpage.
Prompt Box This is a box that pops up and asks the user
for some information. Perhaps you've gone to a webpage in the past and it asked
for your name in one of these boxes. Whatever is typed in by the user into one
of these boxes can then be displayed on the page using the document.write()
function. The easiest way to explain it is via example. So check out Figure 4.2
below to see how it works.
| Figure 4.2 |
<script
language="JavaScript" type="text/javascript">
var rank = prompt("Please enter your rank","");
if (rank != null && rank != "")
{
document.write("Greetings " + rank)
}
</script> |
The prompt box put after right of the operator so that whatever the results
of the prompt box are, is assigned to the variable on the left of the
operator. In a comparison function below (if) the script checks to see if no
value is present (explained later in the course notes). If it is not blank
then Greetings rank is added to the page.
Confirm Box
This is a box that pops up and requests one of either two answers, okay or
cancel, which is basically true or false. This could be important for like, a
webpage where only users over the age of 18, or only members of a certain
subgroup are allowed to view. Even though perhaps the user could be lying their
presence on the pages implies something and liabilities could perhaps be
thwarted. I'm sure confirm box has other uses, as before easier explained in
example so see Figure 4.3.
| Figure 4.3 |
<script
language="JavaScript" type="text/javascript">
var rank = confirm("Are you ranked Real Admiral of Above?");
if (name == true)
{
document.write("Please proceed to the secret admiral lounge.")
}
else
{
document.write("You are not permitted entry to this area.")
}
</script> |
As before the confirm box is put right of the operator so that whatever you
press is then stored in the variable declared before the confirm box. In this
case rank stores either true or false. Using the comparison if, the webpage then
displays to the user if they are permitted to the secret admiral lounge. Note
that I have no idea if such a lounge really exists, I truthfully answered no.
|
