|
|
| |||
First NameOne of the more exciting things about "document.write()" is that it can write HTML tags as easily as it can regular text. This lesson will take us through the steps necessary that will make a customized page using "document.write()". Lets begin by just getting and displaying a single name similar to what we did in the last lesson. We'll begin by making a basic HTML outline and adding a Prompt Box with a variable associated with it:
<html> The above will generate the Prompt Box and receive the entered data and store it in a variable called "firstName". Note the capitalization of the "N" in "firstName". It's not necessary, you can name the variable pretty much anything you want except for a JavaScript reserved word like "function". But, remember that capitalization counts in JavaScript. The variable "firstName" is not the same as "firstname" or "first_name". Now lets add our "document.write()" Method to print the name between <h1> tags:
<html> Click here to see the above code in action. Last NameNow lets add another name. First we'll need to add a second Prompt Box with its own variable. I'll call the new variable "lastName".
<html> Now lets present "lastName" along with "firstName". I want to use the "document.write()" Method I've already coded. I also want "lastName" to be below "firstName", so I'll need to add a <br> tag to the "document.write()" to make the line break.
<h1 align="center"> Pay special attention to how I "added" the <br> tag and the "lastName" variable. First, I use "+" signs between the different elements. I must put the <br> tag in quotes because it is not a variable, it is a literal, a text string in this case. I want it written exactly as it's coded into the "document.write()" Method. Also note that I haven't added any error control for when "Cancel" is clicked or no data is entered. We'll get to that later. Now the page will display the value of "firstName", make a line break, and display the value of "lastName" on the new line below "firstName". Here's a sample page. What's important to remember here is the difference between a variable like "firstName" that holds a value that can be changed from a literal value that cannot be changed. Literal values, like specific strings or tags, must be put in quotes. We'll be getting a lot of practice in this so you don't forget. Header SizeNow lets get the "document.write()" method to change the size of our <h> tag. For the sake of simplicity and clarity, I'm going to use a Confirm Box where clicking the "OK" button renders the names with an <h1> header, and clicking "Cancel" will display the names with a <h6> header. We'll put the following Confirm Box beneath our previous Prompt Boxes in our <head>:
var lastName = prompt ("Please Enter Your Last Name.", "Last Name"); Now that we've got the box, we need to figure out a way to make clicking "OK" generate <h1> tags and clicking "Cancel" will make <h6> tags. First we'll use IF statements to figure out which button was clicked. Next, we'll need to come up with a couple of variables to represent the tags we want "document.write()" to write. I'll use the variables "openingTag" and "closingTag". Now we're pretty much set up for the IF statement. If "OK" is clicked we'll set the "Tag" variables to <h1>. Otherwise, we'll set them to <h6>.
var size = confirm ("Click \"OK\" for large text. Click \"Cancel\" for small text."); Notice how we treat HTML tags just like any other string. Now we're set to display the size by using the "openingTag" and "closingTag" variables in our "document.write()" method. Please note that I've replaced the old <h1> tags with <div align="center"> tags to keep the text centered. You could add this to the "document.write()" as well, but I didn't for the sake of simplicity.
<div align="center"> Now we're set to go. The Confirm Box and IF statements will assign a tag string to "openingTag" and "closingTag" and "document.write()" will display whichever tags are assigned. Here's a working sample. Font ColorWe could change the color of the text by using JavaScript's "document.fgColor" property like we did in our first lesson. When doing this we must keep in mind that we need to gather the viewer's input before the "document.fgColor" statement. The purpose of this lesson, however, is to familiarize you with using "document.write()". So, we'll be using "document.write()" to write our page's <body> tag to reflect the desired TEXT attribute. First we need to make a prompt box that will let the viewer select a color. This will be a little easier than selecting the header size, because we don't have to use IF statements. We can alert the viewer to limit their colors to those that the browser can render directly from a text value like "red", "blue", "yellow", etc. This Prompt Box will be coded below the previous Confirm Box in the page's <head>. var color = prompt ("Please enter a color: red, yellow, blue, purple, or green. Don't use capital letters or other colors.","Color"); Now the variable "color" can be used directly as it will hold a valid text value for a color. Now lets apply our new color to the text by having "document.write()" write our <body> tag with the appropriate color value for the TEXT attribute:
<script language="JavaScript"> There are a few things to point out here. First, we used two sets of <script> tags. One for the <body> tag and another to write the names and header tags. This is perfectly acceptable. You could have put the <body>'s entire content in a single "document.write()", but it gets hard to keep up with all of the "+"s, quotes, etc. Next look at the structure of the <body>'s "document.write()". It takes a little studying to figure out what's going on. Basically, we have "document.write()" write <body text=". At this point we need to insert the variable "color" to get its value. Finally we need to close with ">. Expect to spend some time debugging these more complex strings. Most of the problems come from mishandled quotes. Don't forget to use the escape character (\) when you need quotes inside a string already enclosed in quotes. Here's a sample of what we've got so far. You will probably want to use an IF/ELSE statement to catch errors in entering the color. I've not included that code for the sake of simplicity. You should be able to figure that out for yourself at this point with a little fiddling around. Background ColorThe background color will be handled by the same "document.write()" we have already writing the <body> tag. We'll just come up with a new variable name and then make a copy of the text color Prompt Box.
var color = prompt ("Please enter a color for the text: red, yellow, blue, purple, or green. Don't use capital letters or other colors.","Color"); Notice that I added some text to the Prompt boxes so the viewer will know how the color he's entering will be used. Otherwise, the boxes are pretty much the same. It is crucial that you use different variables for different boxes! Now lets apply the background color by adding more to our <body> tag with "document.write()".
<script language="JavaScript"> It may not be obvious in the code example, but when you need a space in the tag, like between attributes, you must put this space somewhere inside the quotes holding the literal string (not variable) parts of the tag. The above <body> tag would look like this if "red" were the chosen text color (color = "red"), and "green" were the chosen background color (backcolor = "green"): <body text="red" bgcolor="green"> Reload LinkLets finish this project by making a link that will allow the viewer to start over without having to use their browser's "Reload" button. We'll be using "document.location.reload()" to do this. Another new thing we'll be doing is putting JavaScript statements in the HREF of a link (<a>) tag. This pretty much has the same effect as using the "onClick" event. In the bottom of our <body>'s content add:
<script language="JavaScript"> The only new thing here is where we put the JavaScript statement. In the HREF of an <a> tag. To do this we put the statement in quotes and always precede it with javascript:. Don't forget the colon (:). This technique is often used when only one or two JavaScript statements are executed when a link is clicked. If you need to run more than a couple of statements, you should really make a function and HREF to the function -- <a href="javascript:myFunction()">. You can also use the "onClick" Event in an <a> tag for the same effect: <a href="page2.htm" onClick="myFunction()">. Notice that the JavaScript Event "onClick" doesn't require the opening "javascript:". Only JavaScript put in the HREF needs the "javascript:" preceding it. Now when the link is clicked, the page will reload and the viewer can start over. Keep in mind that I did not add error control to the samples. So, you may get errors with "out of bounds" data. This was for the sake of simplicity. We'll learn all sorts of ways to trap and fix errors later on. Here's a sample of the finished page. Play around with all of the things we did in this lesson. Give everything a while to sink in before continuing. Oh, you probably noticed the other link that closes the window. You make it with the "close()" method of the window object -- window.close(). Stick it in the <a> tag just like you did with the "document.location.reload()" method: <a href="javascript:window.close()"> We'll be dealing a lot more with opening and closing windows in a later section. |
|||
| |||