DMA106 JavaScript

hey everybody,
forgive me for waiting until the absolute last second before class this time to post the lesson from our last class (2 weeks ago!). no excuses, but as a way of explanation, i'll say this: as you know the end of the semester is a busy time for you as students, it is also busy for those who teach the classes.
in any case, what you will find below is a review of what we did in our second class on form validation in which we covered mostly the process to validate checkboxes. there are many ways of doing all of these things, many ways of constructing scripts to do the same things, so if you find a different way to do exactly what is covered in class that for whatever reason suits you better, by all means do it. my only request is that you understand, and be able to explain to me what is going on in your script so i will know that you do, in fact, know what is going on there (and that you didn't—gasp!—copy the script from somewhere else).
i hope you all have been busy on your JavaScript projects the last couple of weeks even though we haven't met for class. only two weeks to go, so i'll see you for tonight's class and wish you good luck.
carter-

TOPICS:
- Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
- Form Validation;
  - LINK Modifying the Table;
  - LINK Adding a 2nd Table (within the first table);
  - LINK Adding the new Form Elements;
  - LINK Adding the new IDs;
  - LINK Altering Properties;
  - LINK Using another Conditional;
  - LINK Revising the new Conditional;
  - LINK Checking before Sending Data;
  - LINK Submitting Completed Form;
HOMEWORK: Two weeks ago I'd hoped for the beginning of your Final Projects, but there was little work done on this. Today, I expect to see significant progress since then. At the very least, I should hope to find that you have done most of the design for the Intro Page, and that you have completed most of the design and scripting for the two form pages. Obviously, this is not an official homework assignment, but a recommendation to remain on schedule to be able to decently complete your final project.
&nbps; Remember, although the final project is mostly a technical exercise to determine how well you can manage your JavaScript scripts, it is also largely a design problem. Design issues take more time to resolve. They require several run-throughs, or what are called iterations. This just means that you should design something, show it to someone for critique, then redo your design, show it to someone again for critique, redo it again...etc. Get the picture? If you only give yourself one chance to do the design without outside input, you're bound to produce a poor design. This will reflect badly on your grade.
FINAL PROJECT: Continuing this week we will be working on the final project which is a website for a Children's Book Writer, Bruce Goldstone. Please read the information below, and click on the links to download additional information and the images.
1. CONTENT REQUIREMENTS:
  1. Page 1: INTRO PAGE
    —this page includes some kind of appropriate imagery of your choice with a series of links: About Bruce, His Books, Image Gallery, Mailing List, Order Form . In this page, you should establish the color scheme that you will use throughout your design for this site. You should also establish ‘the look’ you are going for with the sort of imagery you choose and the fonts you select.
    1. In addition to the imagery here, and the links, we should also see the name of the website Bruce_Goldstone.com.
    2. It should say somewhere that he is a children's book writer.
    3. You should also place an image from his new book (all the images that I gave you are from the same book—Great Estimations).
    4. Also necessary, is the the title of the new book, Great Estimations.
    5. And finally, in addition to all of this in the Intro page, you also need to mention that it is available in bookstores everywhere.
  2. Page 2: 'ABOUT BRUCE' PAGE—this page includes one image of the author, and text about him (to be furnished at a later time). The main thing you need to know about him right now to start your site is that he is a children’s book author.
  3. Page 3: 'HIS BOOKS' PAGE—This page includes a thumbnail image of each book (all of which you can download online; and, the thumbnail should also be clickable to get to a larger image that pops up in a different window) along with the following text.
    - Great Estimations (his latest book)—thanks to jaw-dropping color photos, the author, Bruce Goldstone, lays out a mixed assemblage of toys, pipe cleaners, marbles, peanuts, and other small items. He helps viewers train themselves to estimate the size of groups of about 10 things on sight, then goes on to present similar, often fetchingly arranged, materials by hundreds and (!) thousands. He also describes "clump counting" and "box and count" methods, offering pages chock-full of plastic bugs ("It isn't gross--it's a gross."), dog and cat stamps, a penguin colony, tiny rice grains, a bowl of jellybeans, and more. Including hints for each exercise, and frequent reminders that the goal is a "reasonable estimate," not an exact number, this book lends itself equally well to skill building and to casual reading.
    - The Beastly Feast—The centerpiece is arranged and the table is set, ready for The Beastly Feast. Fishes bring knishes, puffins come bearing muffins, and mosquitoes bring burritos as the guests prance and zip across the pages to this deliriously raucous food fest. Young readers will delight in the chaos that ensues when the flies' pie crashes onto the festive table loaded with parrots' carrots, antelopes' cantaloupe, and other potluck dishes. They also will find it hard to resist manipulating the delicious word pairs and adding their own silly rhymes. Goldstone has created a rhyming story with a minimum of words that may remind readers of Bill Martin's Chicka Chicka Boom Boom (S & S, 1989) in its exuberant beat and topsy-turvy outcome. It is Lent's fabulous illustrations, however, that place this book in its own unique class. The artist made his own paper and then printed it with colorful patterns using cut cardboard and linoleum. The resulting lively collages and layout convey a sense of movement and excitement. The rich visual details nicely balance the simple words and add complexity to an otherwise straightforward plot. This collaboration is cause for celebration; The Beastly Feast will give youngsters lots of reasons to rejoice.
    - Ten Friends—"If you could ask 10 friends to tea, tell me who your friends would be," begins Goldstone's rollicking, rhyming approach to addition and multiplication. In each of 10 spreads, the unseen narrator suggests different combinations that add up to 10, which Cahoon (Word Play ABC) interprets in vibrantly saturated spreads of an anthropomorphized menagerie. A rose-hued stage scene featuring a sextet of flamingos en pointe, partnered with four leaping frogs, for instance, illustrates the equation 6 + 4; while 8 + 2 translates into eight mouse tailors cavorting among spools and thread, joined by two plunger-toting elephant plumbers. Whenever the equations lengthen beyond two addends, the rhyming text takes on jovial patter-song silliness: "How about 1 prince, 1 painter, and 2 potters, 1 diner, 1 miner, 1 major, and 3 otters?" Finally, the book offers up the cumulative possibility of what would happen "if ALL your friends show up": it's the number 100, the magnitude of which is driven home by a page filled with thumbnail portraits of every one of the participants. Exuberantly stylish, this painless introduction to the power of 10 should prove to be many aspiring mathematicians' cup of tea.
    - Bip in a Book—Marcel Marceau's genius for the art of silence has astonished and delighted audiences of all ages for more than 50 years. Bip is Marceau's beloved alter ego, a hapless clown with unlimited curiosity and compassion. Since his debut in 1947, Bip has bravely explored every imaginable location, from a skating rink to a lion cage. But he has never been trapped inside the pages of a book... until now. In Bip in a Book, this richly evocative drama is reinterpreted for a new generation. Once again Marceau's famous innocent is trapped, but this time he is confined not by an imaginary cage, but by a page. Dressed in his signature striped pullover and battered opera hat, Bip is happily oblivious to his plight until he walks smack into the right edge of the page. As the reader turns the pages, Bip's imaginative exploration of this unexpected situation is told through 32 vivid photographs, each underscoring Marceau's outstanding gift of expression. Anyone who loves the theater will cherish these playful photographs of a modern master at work, but even readers who have never seen Bip will be drawn to the creativity and suspense of this one-of-a-kind story.
    - Why is Blue Dog Blue?—for years Blue Dog's bold blueness has captivated adults. Now children get to join in the fun when they open this vibrant book, which finally answers the question we've all wondered about since we first met Blue Dog's riveting stare: Why is Blue Dog blue? Blue Dog's creator, George Rodrigue, takes readers on a playful tour of his unique color world. In it, he combines preposterous puns with all-new whimsical Blue Dog silkscreens to go where other color guides are too yellow-bellied to tread. Readers of all ages will giggle as Blue Dog changes color from red or green to auburn or chartreuse. By the end of the book, they will see that the artist's reasoning is both logical and magical: Blue Dog simply had to be blue.
    - A Gnome’s Christmas—When a mysterious greenwood box is discovered in the rafters of an old barn in northern Finland, it is found to contain tiny bundles of paper, each revealing remarkable descriptions of the Christmas rituals of the gnomes. In every gnome home around the world, Christmas lasts an entire month, and it signals the coming of a new year, which the gnomes ring in with a blessing: "May this year be full of proud deeds and silly games, beautiful songs and hearty feasts, clever jokes, loving friends, and enough surprises to keep us on our toes."
      Following in the tradition of Gnomes (which sold one million copies), The Complete Gnomes, and The Secret Lives of Gnomes, A Gnome's Christmas is the latest study on the lives and cultural habits of gnomes. This delightful book features songs, stories, games, and recipes for holiday treats, as well as captivating artwork by celebrated artist Rien Poortvliet. Including a special holiday ornament, A Gnome's Christmas is a must-have for gnomeophiles and Christmas fans of all ages.
  4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in his latest book placed in a thumbnail gallery. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window.
    - This page will include an image-replacement script which will change an image whenever the user mouses-over one of them.
    - This page will also include a script to create a pop-up window when the user clicks on one of the images that contains a larger version of the image with a caption.
  5. Page 5: FORM I PAGE—Mailing List (form) Page, specific form elements to be given at a later date.
    - This page will include a script to validate the form.
    - This page will also include a script to print out the data that was typed in the form in a new page using a document.write().
  6. Page 6: FORM II PAGE—Order Information (form) Page, specific form elements to be given at a later date.
    - This page will include a script to validate the form.
    - This page will also include a script to print out the data that was typed in the form in a new page using a document.write().
2. DESIGN REQUIREMENTS:
  1. Color Scheme—you must choose a color scheme for your web-site that you can show to me or describe to me. My suggestions are simple, easy, non-complicated. Keep in mind who your audience is and what the subject matter is.
  2. Page Layout—you must use CSS and/or tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
3. TECHNICAL REQUIREMENTS:
  1. XHTML
    —ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
    - that all tags and their attributes must be typed in lower case;
    - that all attribute values must be typed in quotes and with units;
    - that the DTD for strict XHTML must be typed at the top of the document;
    - that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
    - that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
    - and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
    If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
  2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, and you should have learned it in the previous DMA110 class; and further, as it is the standard in web-design, it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
  3. JavaScript—As this is the heart and primary topic of this course, the presence and functionality of your JavaScript code is your primary task. More than 50% of the grade for this project will be based on this, so please focus on the scripts above all. Although XHTML, CSS, the content, and design of the site are all important, this is a JavaScript class after all, so keep in mind that an ugly site with functioning scripts, will do much better than a beautiful site with non-functioning scripts. There will be several scripts that you must include in your site:
    1. Form-validation (covered weeks 10-11)—The most important scripts will be the ones that deal with form validation. These must accomplish a few goals:
      1. They must first and foremost determine whether the form fields have been filled in;
      2. they must next determine whether text has been typed where it should be and that numerals are typed where they should be;
      3. they must prevent the data from being sent to output (such as in a document.write()) if the fields are not completely filled;
      4. and lastly, there must be a document.write() that prints out all the data that was typed into the form.
    2. image-replacement (covered week 12)—In two places, on the opening page and then somewhere else in your site—either as menu items or on the gallery page—you must use scripts to create mouse-over buttons with images. These are scripts that replace an image with another image when the mouse passes over the top of it, and then return the original image when the mouse moves away.
    3. PopUp Windows (covered week 13)—On the gallery page, the thumbnail images must be clickable and they must call a script that creates a new browser window with a larger full-color version of the images. The new browser windows must not have any menus at the top or scrollbars on the side or bottom. Accompanying each larger image, must be information about the image, the title, the date, and the media used, as well as a link that closes the window (closing the window can also be accomplished with JavaScript).
    4. Date insertion (covered week 13)—At the top of each of the content pages, you must insert the current date using JavaScript.
4. FILES: You will need the following files to complete the website.
  - LINK click here for information about the Final Project.
  - LINK images 1 click here and below to download images. PLEASE NOTE These are very large files.
  - LINK images 2
  - LINK images 3
  - LINK images 4
  - LINK images 5
  - LINK images 6
FORM VALIDATION II:
1. Creating the Table—For organizing and laying-out our form, we are going to resume our work on form validation by modifying our table from last week to include checkboxes; however, before we do that, let us first modify the table we created before. First, we will add two new rows.
  
  Here, you will find the way the new table will look, and below, its modified code:
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td colspan="5" align="center">information</td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td width="50px"> </td>
  <td width="50px" align="right">first name</td>
  <td width="10px"> </td>
  <td>
  <input type="text"/>
  </td>
  <td width="100px"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">last name</td>
  <td> </td>
  <td>
  <input type="text"/>
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">city</td>
  <td> </td>
  <td>
  <input type="text"/>
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">state</td>
  <td> </td>
  <td>
  <input type="text"/>
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">zip code</td>
  <td> </td>
  <td>
  <input type="text"/>
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td colspan="3"> ;</td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td>
  <input type="button" value="submit"/>
  &nbs; </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
2. Adding the 2nd Table—The following demonstrates how to insert a new table within the first table:
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td colspan="5" align="center">information</td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td width="50px"> </td>
  <td width="50px" align="right">first name</td>
  <td width="10px"> </td>
  <td>
  <input type="text">
  </td>
  <td width="100px"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">last name</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">city</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">state</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">zip code</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td colspan="3"> ;</td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5" valign="top">
  
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td> </td>
  <td width="10px"> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td> </td>
  <td;> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td> </td>
  <td;> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td> </td>
  <td;> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td> </td>
  <td;> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td> </td>
  <td;> </td>
  <td> </td>
  </tr>
  </table>
  
  </td>
  </tr>
  
  <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td>
  <input type="button" value="submit"/>
  &nbs; </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
3. Adding the new Form Elements—The following table inserts the new form elements and form tags that we will add to the 2nd table.
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  choice 1
  choice 2
  choice 3
  choice 4
  choice 5
  choice 6
  
  <form>
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td colspan="5" align="center">information</td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td width="50px"> </td>
  <td width="50px" align="right">first name</td>
  <td width="10px"> </td>
  <td>
  <input type="text">
  </td>
  <td width="100px"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">last name</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">city</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">state</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">zip code</td>
  <td> </td>
  <td>
  <input type="text">
  </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td colspan="3"> ;</td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5" valign="top">
  
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td>choice 1</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  
  <tr>
  <td>choice 2</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  
  <tr>
  <td>choice 3</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  
  <tr>
  <td>choice 4</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  
  <tr>
  <td>choice 5</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  
  <tr>
  <td>choice 6</td>
  <td width="10px"> </td>
  <td><input type="checkbox"/></td>
  </tr>
  </table>
  
  </td>
  </tr>
  
  <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td>
  <input type="button" value="submit"/>
  &nbs; </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
  </form>
4. Adding the new IDs—Not only so that the styling from the CSS code above (using the layer id) is be applied to the<div> tags surrounding the form and table, but also so that the JavaScripts actually function, we must apply IDs to the relevant tags below:
  <div id="layer1">
  <form id="myForm">
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td colspan="5" align="center">information</td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td width="50px"> </td>
  <td width="50px" align="right" id="firstText">first name</td>
  <td width="10px"> </td>
  <td><input type="text" id="first"/></td>
  <td width="100px" id="firstWarn"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right" id="lastText">last name</td>
  <td> </td>
  <td><input type="text" id="last"/></td>
  <td id="lastWarn"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right" id="cityText">city</td>
  <td> </td>
  <td><input type="text" id="city"/></td>
  <td id="cityWarn"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right" id="stateText">state</td>
  <td> </td>
  <td><input type="text" id="state"/></td>
  <td id="stateWarn"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right" id="zipText">zip code</td>
  <td> </td>
  <td><input type="text" id="zip"/></td>
  <td id="zipWarn"> </td>
  </tr>
  
  <tr>
  <td colspan="5" id="check">
  
  <table width="100%" border="1px" cellspacing="0px" cellpadding="0px">
  <tr>
  <td id="choiceText1">choice 1</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice1"/></td>
  </tr>
  
  <tr>
  <td id="choiceText2">choice 2</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice2"/></td>
  </tr>
  
  <tr>
  <td id="choiceText3">choice 3</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice3"/></td>
  </tr>
  
  <tr>
  <td id="choiceText4">choice 4</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice4"/></td>
  </tr>
  
  <tr>
  <td id="choiceText5">choice 5</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice5"/></td>
  </tr>
  
  <tr>
  <td id="choiceText6">choice 6</td>
  <td width="10px"> </td>
  <td><input type="checkbox" id="choice6"/></td>
  </tr>
  </table>
  
  </td>
  </tr>
  
  <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td><input type="button" value="submit" id="submit"/></td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
  </form>
  </div>
  
  With the CSS styles added via the Layer1 ID, the table and layer with their new form element additions will now appear as follows:
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  choice 1
  choice 2
  choice 3
  choice 4
  choice 5
  choice 6
5. Review: Altering Properties—Let us go over what we have learned the last couple of weeks about evaluating forms and changing their properties: before we begin the actual scripting, therefore, in the head of the document between the script tags, we will first initialize our function as function validate(). We will also have to call this function with our submit button down at the bottom of the form by using an event handler like so: onclick="validate()".
  Regarding the function of this script, what we ultimately want to occur is for the script to determine if all of the form fields have been filled out. If they have not, the script should prevent the form from being submitted and indicate to the user how and where the form should be completed. To change the properties, we will do three things, change the color of the text label, change the background color of the form field, and add the text "required" beside the field that should be filled out. Although this in itself does not stop the form data from being submitted, we will start here and build from it.
  To alter the properties of an element, such as its color, size, or background color is much like extracting and manipulating the value of an element. In fact, an element's value IS one of its properties. Therefore, a text field has several properties, it size and background color, as well as its value. Moreover, accessing those other properties, other than the value, is done in the same way, using the document.getElementById() function:
  
  <script language="javascript" type="text/javascript">
  
  </script>
  Using this little script, by pressing on the submit button, we will cause the words first name to become red. By adding the following line to the script, we can cause the background color of the form field to change colors: document.getElementByID("first").style.backgroundColor = "#ffaaaa;"
  And furthermore, we can insert text into the space to the left of the form element to indicate that the form field is required with these next lines:
  document.getElementById("firstWarn").innerHTML= "required";
  document.getElementById("firstWarn").style.color="#cc0000";
  document.getElementById("firstWarn").style.fontSize="10pt";
  In order to change the properties of all of the text fields, we should type the script as follows:
  
  <script language="javascript" type="text/javascript">
  
  document.getElementById("choiceText1").style.color = "#cc0000";
  
  document.getElementById("choiceText2").style.color = "#cc0000";
  
  document.getElementById("choiceText3").style.color = "#cc0000";
  
  document.getElementById("choiceText4").style.color = "#cc0000";
  
  document.getElementById("choiceText5").style.color = "#cc0000";
  
  document.getElementById("choiceText6").style.color = "#cc0000";
  }
  //-->
  </script>
  Click on the submit button above to see the function at work.
6. Adding a new Conditional—Now, what we want to happen is not really simply to make text appear and make things change colors. As wonderful as that is, on its own it does little to help the user to fill out the form correctly. In fact, we DO NOT want it to happen if the user does in fact fill out the form properly. Therefore, it should only change colors, for example, when the user leaves the fields blank. In plain english then, our conditional would read as follows:
  
  IF (the form field is left blank)
  {
  then change the colors of the text
  and change the background color
  and add the word "required"
  }
  ELSE
  {
  DO NOT change the colors of the text
  DO NOT change the background color
  DO NOT add the word "required"
  }
  
  Using JavaScript terminology, it would read as follows:
  
  if (document.getElementById("first").value == "")
  {
  document.getElementById("firstText").style.color = "#cc0000";
  document.getElementById("first").style.backgroundColor = "#ffaaaa;"
  document.getElementById("firstWarn").innerHTML = "required";
  document.getElementById("firstWarn").style.color = "#cc0000";
  document.getElementById("firstWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("firstText;).style.color = "#aa99cc";
  document.getElementById("first").style.backgroundColor = "#ffffff;"
  documetn.getElementById("firstWarn").innerHTML = "";
  }
  
  The same sort of conditional statement must be used for each of the text fields:
  
  if (document.getElementById("first").value == "")
  {
  document.getElementById("firstText").style.color = "#cc0000";
  document.getElementByID("first").style.backgroundColor = "#ffaaaa;"
  document.getElementById("firstWarn").innerHTML = "required";
  document.getElementById("firstWarn").style.color = "#cc0000";
  document.getElementById("firstWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("firstText;).style.color = "#aa99cc";
  document.getElementById("first").style.backgroundColor = "#ffffff;"
  documetn.getElementById("firstWarn").innerHTML = "";
  }
  
  if (document.getElementById("last").value == "")
  {
  document.getElementById("lastText").style.color = "#cc0000";
  document.getElementByID("last").style.backgroundColor = "#ffaaaa;"
  document.getElementById("lastWarn").innerHTML = "required";
  document.getElementById("lastWarn").style.color = "#cc0000";
  document.getElementById("lastWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("lastText;).style.color = "#aa99cc";
  document.getElementById("last").style.backgroundColor = "#ffffff;"
  documetn.getElementById("lastWarn").innerHTML = "";
  }
  
  if (document.getElementById("city").value == "")
  {
  document.getElementById("cityText").style.color = "#cc0000";
  document.getElementByID("city").style.backgroundColor = "#ffaaaa;"
  document.getElementById("cityWarn").innerHTML = "required";
  document.getElementById("cityWarn").style.color = "#cc0000";
  document.getElementById("cityWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("cityText;).style.color = "#aa99cc";
  document.getElementById("city").style.backgroundColor = "#ffffff;"
  documetn.getElementById("cityWarn").innerHTML = "";
  }
  
  if (document.getElementById("state").value == "")
  {
  document.getElementById("stateText").style.color = "#cc0000";
  document.getElementByID("state").style.backgroundColor = "#ffaaaa;"
  document.getElementById("stateWarn").innerHTML = "required";
  document.getElementById("stateWarn").style.color = "#cc0000";
  document.getElementById("stateWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("stateText;).style.color = "#aa99cc";
  document.getElementById("state").style.backgroundColor = "#ffffff;"
  documetn.getElementById("stateWarn").innerHTML = "";
  }
  
  if (document.getElementById("zip").value == "")
  {
  document.getElementById("zipText").style.color = "#cc0000";
  document.getElementByID("zip").style.backgroundColor = "#ffaaaa;"
  document.getElementById("zipWarn").innerHTML = "required";
  document.getElementById("zipWarn").style.color = "#cc0000";
  document.getElementById("zipWarn").style.fontSize = "10pt";
  }
  else
  {
  document.getElementById("zipText;).style.color = "#aa99cc";
  document.getElementById("zip").style.backgroundColor = "#ffffff;"
  document.getElementById("zipWarn").innerHTML = "";
  
  if (!document.getElementById("choice1").checked)
  {
  document.getElementById("choiceText1").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText1").style.color = "#aa99cc";
  }
  
  if (!document.getElementById("choice2").checked)
  {
  document.getElementById("choiceText2").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText2").style.color = "#aa99cc";
  }
  
  if (!document.getElementById("choice3").checked)
  {
  document.getElementById("choiceText3").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText3").style.color = "#aa99cc";
  }
  
  if (!document.getElementById("choice4").checked)
  {
  document.getElementById("choiceText4").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText4").style.color = "#aa99cc";
  }
  
  if (!document.getElementById("choice5").checked)
  {
  document.getElementById("choiceText5").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText5").style.color = "#aa99cc";
  }
  
  if (!document.getElementById("choice6").checked)
  {
  document.getElementById("choiceText6").style.color = "#aa0000";
  }
  else
  {
  document.getElementById("choiceText6").style.color = "#aa99cc";
  }
  
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  choice 1
  choice 2
  choice 3
  choice 4
  choice 5
  choice 6
7. Revising the new Conditional—Now, what we really want to happen with the checkboxes is not exactly the same as with the textboxes. The textboxes must be filled-out, but the checkboxes do not have to be; to submit the form, however, at least one of the checkboxes should be checked. Therefore we have to alter the conditionals that we added above, but the logic behind it is a bit complicated, so once again I will type it in plain English first, and then in JavaScript-ese:
  
  IF (if NONE of the checkboxes are checked)
  {
  then change the colors of the text next to the checkboxes
  }
  ELSE
  {
  DO NOT change the colors of the text
  }
  
  Now here we must pay attention: we will not change the colors of each checkbox if it is not checked. No, we will only change the colors of ALL the checkboxes if NONE of them is checked. If at least one of them is checked, then NONE of the text beside the checkboxes will be changed. It is an all-or-none situation. We cannot check them one at a time, but we must instead check all of them at once. As a result, the condition between the parentheses after the if must be what we call a compound condition and we will use the logical operator, OR. The way we write OR in JavaScript-ese is like this: || . The condition will therefore look like this and we can replace all those new IF statements above with this one statement:
  if (!(document.getElementById("choice1").checked ||
  document.getElementById("choice2").checked ||
  document.getElementById("choice3").checked ||
  document.getElementById("choice4").checked ||
  document.getElementById("choice5").checked ||
  document.getElementById("choice6").checked))
  You should notice here that there are TWO sets of parentheses at the beginning, that is because one set (the inner set) encompasses ALL of the checkboxes. Within this pair of parentheses, we are checking each individual checkbox to see if one OR another is checked. If so, if at least one of the checkboxes turns out to be checked, then we will get a true value. Only one need be checked to get a true value, which means if none of them is checked, we will get a false value.
  Remember, though, that this condition is checking because we want to color the text red if NONE of them is checked. you should also recall, that if the condition is false, then nothing happens. This means we have to have a true condition. But how can we turn the false into a true? That's where the exclamation point comes in. This is the logical operator that means NOT. So, if we put that exclamation point there at the beginning of the inner set of parentheses, we are changing the false into a true. Therefore, if none of the checkboxes is checked, we will get a false, but the exclamation point will turn it into true, which will cause the statements turning the text red to be run.
  To make that statement simpler, however, let us put the whole thing into a variable, and then just put the variable into the condition, like so:
  var books = (document.getElementById("choice1").checked ||
  document.getElementById("choice2").checked ||
  document.getElementById("choice3").checked ||
  document.getElementById("choice4").checked ||
  document.getElementById("choice5").checked ||
  document.getElementById("choice6").checked);
  
  That will put a value of true or false into the variable, true if one or more of the boxes is checked, and false if none of them is checked.
  if (!books)
  
  This line is how the new condition now looks.
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  choice 1
  choice 2
  choice 3
  choice 4
  choice 5
  choice 6
8. Final Check—Once all the fields have been checked one at a time to see if they are filled in properly, we must do one last check to see if they're all filled before we send the data out. This entails one final conditional statement, and, as each and every field must be filled out, it will be a compound conditional like the previous one. Thus, it is another all or nothing situation: if all of the fields are filled out, then we get a value of true. Otherwise, even if only one field is left improperly filled out, if all the fields are NOT filled out, then we get a value of false. Let us go through them: each of the textboxes must be filled out, and at least one of the checkboxes must be checked for the form to be properly filled out. Our last conditional, the final check which consists of a compound conditional looks like so:
  
  if (document.getElementById("first").value != "" &&
  document.getElementById("last").value != "" &&
  document.getElementById("city").value != "" &&
  document.getElementById("state").value != "" &&
  document.getElementById(""zip").value != "" && books)
  
  That is the final condition before we submit the data. Now, for our purposes in this class, we are not submitting our data to any server, but instead are simply giving some output in the form of a document.write(). We will put this document.write() within a separate user-defined function that we will call display(). Therefore, if the final condition results in true, then we will run the display() function like so:
  
  if (document.getElementById("first").value != "" &&
  document.getElementById("last").value != "" &&
  document.getElementById("city").value != "" &&
  document.getElementById("state").value != "" &&
  document.getElementById(""zip").value != "" && books)
  {
  display();
  };
  Of course, next we have to define the document.write within the display() function.

JavaScript

Friday, April 13, 2007

Spring 2007

week 11: 3/30

About Me

Links

Previous Posts

Archives

information

	first name

	last name

	city

	state

	zip code