|
Web Dating Click Here! |
|
Video Game Deals Click Here! |
|
| ||
| |||
Making A Prompt BoxAll right, , we're going to learn how to make the box you just filled out and display the data on your page and an alert box. If you'd like another chance to enter your name click here. The Box you typed your name in is called a "Prompt Box" in JavaScript. It allows the viewer to enter string or numerical data that you can use later -- like I'm doing with your name: is learning how to make Prompt Boxes and use the entered data. As with most JavaScript effects, the first thing we want to decide is when we want the box to pop up. What JavaScript "Event" will we use? For reasons to be discussed later in this lesson, I need the box to pop up before the <body> of the page loads. You see, the <body> needs to know your name before it can write it. To get the Prompt Box to appear before the page loads, I won't use the usual Event/Function model at all. I'll just put the code for the Prompt Box between <script> tags in my page's <head>:
<script language="JavaScript"> Start out making the box by putting <script> tags in your page's <head>. Next just type in "prompt" just like you did making "alert" and "confirm" boxes. The two strings in the Prompt Box's parentheses are displayed in the box. The first string is displayed in the Prompt Box itself. This is usually some type of instruction. The second string is presented in the textbox of the Prompt Box. The textbox is where the viewer will type in some data. Now we're done with that part. Prompt Box will pop up when the <head> of your page loads. This will be before the <body> loads just like we want it to be. Now lets grab the data the viewer enters an put it in an alert() box. Assigning & Using A VariableWe snag the data entered into the Prompt Box just like we did with the Confirm Box. We assign a variable to equal the Prompt Box:
<script language="JavaScript"> I declared the variable using JavaScript's "var" statement and called it "name". Now the variable "name" will contain whatever data the viewer enters. So far, we've got the box to pop up to receive data from the viewer and have assigned a variable, "name", to hold that data. Let's use "name" to display the data entered in the Prompt Box in a separate Alert Box:
<script language="JavaScript"> See how this works here. Now that's pretty cool, isn't it, . Lets look at a couple of special situations and then we'll move on to writing the data to your web page instead of an Alert Box. Default & NullLets run the previous JavaScript again, but this time don't enter any data. Just click the okay button. Ready. Click Here. Notice that the default text, "Your Name Goes Here", is displayed. The variable "name" is assigned that value by default (name = "Your Name Goes Here"). Now run the JavaScript again, enter no data and click "Cancel". The follow up Alert Box will display "null" (without the quotes -- name = null). The "null" value is returned anytime the "Cancel" button of a Prompt Box is clicked, even if data is entered. This is very different from the Boolean true/false values of the Confirm box. Null is an actual value meaning "nothing". Not even zero. Just flat out nothing. It is not a string and does not go in quotes. We can use this knowledge to detect when the viewer has not entered any data or has clicked the "Cancel" button. Lets say we want an Alert Box to pop up and say "Click the link and try again" if the viewer either enters no data or clicks the "Cancel" button. We'll use JavaScript's IF/ELSE statement to determine if name equals either the default text or null. Lets look at the IF/ELSE code first: if (name == null || name == "Your Name Goes Here"){alert ("Click the link and try again");} This is pretty much like the IF/ELSE statements we've used before except for the two red vertical lines. These lines are called "pipes". They are made by holding down Shift and hitting the backslash (\) key on most keyboards. This key is found just above the "Enter" key. We use two pipes to indicate "Logical OR" in JavaScript. The Logical OR works just like the word "or" in English. If either this OR that is true, the IF/ELSE's statements will run. If neither is true, the IF/ELSE's statements are ignored and the function continues with the next statement outside the IF/ELSE statement. You can add more than two conditions, too, but we don't need to for this exercise. In short, we've got an IF/ELSE statement that will detect when no data has been entered (name == "Your Name Goes Here") or the "Cancel" button has been clicked (name == null). If either of these events occurs, The "Click the link and try again" Alert Box will appear. Now lets put our IF/ELSE statement in our previous code:
<script language="JavaScript"> Notice that we need to place the warning before the "alert(name)" box to get this to work properly. Warnings and special conditions almost always come before the main function in the code. Now lets see how our new program works. Click here to try out the warning Alert Box. OOOOOOPS! One small problem. After the warning Alert Box is displayed and cleared, the main Alert Box pops up anyway displaying either null or the default text. We can fix this by using the ELSE statement to enclose the main alert(name) box.
<script language="JavaScript"> Now lets try this new code. See how the use of both IF and ELSE solves the problem? ELSE takes the main alert(name) box out of the normal program flow. I did this intentionally because I've not been using ELSE that much. You don't always have to have an ELSE statement when using IF/ELSE, but don't forget it's there. The ELSE statement generally contains the default programming if all goes well, or a generic warning if anything goes wrong. Later we'll learn how to make a loop back to the function so you don't have to click the link each time you want the program to run. For now, lets study how to put the viewer entered data onto our page like I've been doing with your name, . Using document.write()In these last few lessons, we've been using boxes that are JavaScript "Methods" of the "window" object. All of these boxes could be accessed by using something like: window.alert("Hi There"). Normally the "window" part isn't used. Now we'll turn our attention to the "document" object. We can refer to the current window's document as "window.document" or even "navigator.window.document", but when an Event and effect are on the same page, we can just use "document". The document object has all sorts of Properties and Methods. In our first lesson, we explored the "document.bgColor" and "document.fgColor" Properties. Besides Properties, "document" has "Methods", or things it can do. One of these things is write text or HTML code to a web page using the "document.write()" Method. NOTE: When working with Properties, equals signs are used: document.bgColor = red. When using Methods we use parentheses: window.alert("message") or alert("message"). This is a handy thing to keep in mind. It will help you remember what's a Method and what's a Property during your study of JavaScript. Now back to "document.write()". We can use this Method of the "document" object to write stuff to our web pages. Since we want this stuff to be displayed in the browser window, we need to put <script> tags in the <body> of our page instead of the <head>. You can use as many sets of <script> tags as needed in either the <body> or <head>. Generally in the <head>, only one set of <script> tags are needed to hold all of the statements and functions there. The <body> may need more than one set. Below is a simple example of using the "document.write()" Method:
<body> When viewed in a browser the above code would look like this: This is some text in a normal paragraph Not much to look at really. Looks just like regular HTML. The big excitement comes when you discover that the "document.write()" Method will display the contents of variables like the variable "name" we've used in our previous exercises. This is how I got the name you entered to appear on my page. When you entered a name when this page first loaded, I put it in a variable called "name". Anytime I want to print your name on this page, I use the code below: <script language="JavaScript">document.write(name)</script> Notice that I have to use a set of <script> tags. I have to use these each time I want to use the "document.write()" method in my page's <body> so the browser will know to interpret "document.write(name);" as a JavaScript statement and not just text to display. I have to use a closing </script> tag so the browser knows that the text following is in HTML, not JavaScript. I have to use both <script> tags and the "document.write(name)" statement each time I want the name you entered to appear. It should be apparent now why I had to receive the viewer data with a Prompt Box before the page's <body> loaded. If I hadn't, all of the "document.write(name)" statements would've have read "null" or caused a "missing object" error. The variable "name" would not even be declared when the "document.write(name)" statements were executed. This causes the missing object error because the browser doesn't know what "name" is yet. I needed the data to write the page's body, so I had to get it before the <body> loaded. If the data weren't needed to write parts of the <body>, I wouldn't have to get the data before the body loaded and could've used any JavaScript Event to trigger the Prompt Box. ExercisesLets make a simple page that will display someone's name in a big <h1> header. Lets begin by making a simple HTML framework and adding our Prompt Box and variable scripting:
<html> The above is just a basic HTML file with a Prompt Box coded to pop up when the <head> loads -- before the <body> loads. The variable "viewer_name" has been added to hold the viewers entered data. Now lets use JavaScript's "document.write()" Method to put the name between <h1> tags:
<html> First notice that I've added a second set of <script> tags. This second set is in the <body>. Also note that I put the <h1> tags outside of the script. We could have had "document.write()" write the tags, too, but this wasn't really needed in this exercise. Finally, look at the code in red. You should be familiar with it by now. I'm having the "document.write()" Method write the contents of the variable "viewer_name" to the page between the <h1> tags. Click here to see this page in action. Now enhance the above page by detecting when the viewer has not entered any data (viewer_name == "Type Name Here") or has click the "Cancel" button (viewer_name == null). Use your knowledge of JavaScript to pop up a warning box. There's a handy Method of the "document.location" Property called "reload()". Using "document.location.reload()" will force the current page to reload. You could have this happen whenever the viewer clicks "Cancel" or doesn't enter any data. The page will reload and the box will keep popping up until they enter some data and click "OK". You'd put a reload in your IF/ELSE statement that detects null or default text: if (viewer_name == "Type Name Here" || viewer_name == null) {document.location.reload()} This might be irritating in our current exercise, but there are some other good uses for reloading a page that we'll discover later. After adding "error control" to the above exercise and playing with "reload()", make a page that takes and displays two separate pieces of entered data. Hints: Code one Prompt Box after another, each with a different variable assigned to it. Write the data like this: document.write(variable + variable2);. You can use as many variables as you'd like using "+" signs. Next up, we'll be looking into "document.write()" some more and be using more Confirm and Prompt Boxes to gather data. We'll use this data to make a dynamically customized page. |
|||
| |||