As you learned in Lesson 1, the World Wide Web is a vast, interconnected network of documents that effectively integrates text and media such as images, movies, and sounds. The HyperText Markup Language (HTML) consists of tags that identify the contents of a page and provide formatting information for the Web browser. Using HTML tags, it is possible to develop attractive, information-rich pages for the Web. However, HTML alone can only produce static pages, i.e., pages that always look and behave the same each time they are loaded into the browser.
Whatever else you want to appear in your Web page...
The remainder of this assignment statement causes the text entered by the user to be remembered under the name on the left side of the equals sign. In programming terminology, a variable is a name that is given to an arbitrary value so that the value can be remembered and referred to later. In this example, the text entered by the user is assigned to the variable name firstName, and any subsequent references to firstName will recall the user's text.
into the HTML document. When the page is displayed in the browser, this message will appear along with any other text in the HTML document.
EXERCISE 2.1: Cut-and-paste the greet.html text into a new HTML document and verify that it behaves as described. In particular, what is displayed if the user clicks OK without entering a value in the input area?
Since the output produced by a write statement is embedded in the HTML document and displayed by the browser just like any other text, that output can be formatted using HTML tags. For example, assuming the user entered "Dave" for their name, the write statement
would write the text
Hello Dave, welcome to my Web page.
When this text is displayed in the Web browser, the <i></i> tags cause the name Dave to appear in italics. Note that within the output message, the <i></i> tags appear inside the quotes as they are part of the text being written to the HTML document. In contrast, the variable firstName appears outside of quotes, ensuring that the browser will recognize it as a variable and substitute the corresponding value. If you mistakenly placed a variable inside quotes in an output message, the variable name would be displayed as opposed to its value.
EXERCISE 2.2: Modify your greet.html page so that the the user's name appears in bold, and the output is broken across two lines. For example:
welcome to my Web page.
What to do when things go wrong...
|Reserved words that shouldn't be used as variables|
2hotforU salary$ two words "sum_to_date" name
EXERCISE 2.4: Modify your greet.html document so that it prompts the user twice, once for their first name and again for their last name. You will need to use a second variable to store the last name: choose a variable name that suggests its purpose, such as lastName or surname. Once both names have been read in, the page should display the following message (with the appropriate names substituted, of course).
Hello Dave Reed,
or may I just call you Dave?
In the abstract, a variable is a name that represents some value. In practice, this is accomplished by associating with each variable a piece of memory, known as a memory cell. Each memory cell inside the computer stores the value of its corresponding variable.
Assignments to variables can be visualized by drawing a box to represent the memory cell, labeled by the variable name. When an assignment is made, the assigned value is stored in the memory cell (overwriting any previous value that might have been stored there).
| || |
Once you have assigned a value to a particular variable, any reference to the variable name evaluates to the value stored in its associated memory cell. . That is, the value stored in the memory cell is substituted for the variable name. For example, after assigning color to have the value "green", the following two write statements are equivalent:
EXERCISE 2.5: Cut-and-paste the food.html text into a new HTML document and verify that it behaves as described. In particular, what is displayed if the user clicks OK without entering values at the prompts?
Note that the calls to prompt utilize default values, so that if the user clicks OK in the dialog box without entering anything, then "cow" and "moo" will be used. Also note that two of the write statements span multiple lines. This is perfectly legal as long as you don't split a string. That is, the opening and closing quotes for a string must appear on the same line.
EXERCISE 2.7: Cut-and-paste the oldmac.html text into a new HTML document and verify that it behaves as described.
EXERCISE 2.8: Modify your oldMac.html page so that it displays three verses of the song, prompting the user for an animal and sound between each verse. Specifically, cut-and-paste three copies of the code for reading in the inputs and displaying the verse (within the same pair of SCRIPT tags). The same variables can be used for each verse, since each assignment to a variable overwrites the previous value. The calls to prompt should utilize different default values for each verse, however.
In addition to storing values read in from the user, a common use of variables is to store values that are referred to over and over. If a variable is used repeatedly in a section of code, changing a single assignment to that variable can automatically affect the entire page. For example, you may note that the refrain "E-I-E-I-O" appears several times in the Old MacDonald verse. Depending on the source, this refrain may be spelled differently, such as "Eeyigh-Eeyigh-Oh". If this was something you might want to change, you could use a variable to store the desired spelling and then use that variable in the write statements. In effect, all of the verses could be changed simply by changing the single assignment to the variable.
EXERCISE 2.9: Modify your oldMac.html page so that it stores the refrain in a variable and then uses that variable in the write statements. That is, add the assignment
Old MacDonald had a farm, " + refrain + "
EXERCISE 2.10: Modify your oldMac.html page so that the alternate spelling "Eeyigh-Eeyigh-Oh" is used in all of the verses. Hint: due to the use of the variable refrain, this modification should only require a minimal change to your code.
A Mad Lib is a popular party activity where a potentially humorous story is written down, with blanks in the place of some of the key words. Before reading the story, the storyteller asks others present to fill in those blanks. Those selecting the words are only told the type of word required, and have no other knowledge of the story. This lack of context in selecting words can result in an entertaining story when the words are plugged in to the appropriate places. For example, consider the following beginning to a story.
It was a adjective kind of day when person's name walked out into the street. The sky was a deep color , and same name was walking his new pet animal ...
Making the following substitutions:
adjective = smarmy
person's name = Chris
color = mauve
animal = gnu
the story would read:
It was a smarmy kind of day when Chris walked out into the street. The sky was a deep mauve, and Chris was walking his new pet gnu ...
The content of the story can be anything that you like -- be creative! Your story must meet the following conditions, however.
- It must be at least two paragraphs long.
- It must have at least six missing words.
- At least one of the missing words must be used multiple times in the story. For example, the person's name was used twice in the sample story above.
- The page should have a title, centered at the top, that includes your name.
|Additional (optional) exercises||Solutions to odd numbered exercises|