DMA106 JavaScript

Tuesday, July 31, 2007

Summer 2007

week 11: 7/27

hey everybody,
here is the blog entry for last friday. sorry that it took so long this time to put up. the days at the end of the term get more and more demanding, and, since this is the end of the term, the scripts we are writing get more and more complex. so, it is a double-whammy: i have less time because of all the other work i must take care of at the end of the term, and the blogs require more time to create. i hope you all understand.

in any case, the final project is due now in a little more than two weeks, and i sense that many of you have fallen seriously behind. don't let it get any worse. spend more time on this project now. as you know, ridding the scripts of bugs is time-consuming.
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:
For homework last week and the week before, you were to have completed the following pages for the website:
- Introductory Page
- Mailing List/Contact Page (form page)
For homework this week you must begin working on your:
- Image Gallery Page—This should include thumbnails of all the images that I have given you arranged in a pleasing layout using tables and CSS. Please do not link them to pages with larger images at this time. During our next two classes, we will create image rollovers and pop-up windows that contain larger images.
At this point, the only JavaScript for these pages that you should begin is what is on the form pages. The rest is purely a design and html/css exercise. Please remember, you must use a frameset to do this project. This means that in order to complete the homework, you not only need to do the Introductory & Mailing List/Contact Info & Gallery Pages of content, but also the frameset document and the navigation document. For the details on the final website see information below.

And remember, you may use Dreamweaver and ImageReady, but your XHTML code ABSOLUTELY MUST follow STRICT XHTML guidelines. BEWARE those programs typically insert a lot of non-standard and extraneous code. If you are uncertain what the proper code is, then refer to a book or a site like W3Schools for further information. Or, ask me if in doubt.
FINAL PROJECT: Starting this week we will be working on the final project which is a website for an Art Gallery, named Alpha Gallery. 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 (must be relevant to the gallery) with a series of links: Gallery Info, Artists, Image Gallery, Mailing List/Contact Information. 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. If we have time, we will create pull-down menus for the Artists and Gallery links.
    1. In addition to the imagery here, and the links, we should also see the name of the website Alpha_Gallery.com.
    2. It should say somewhere that it is a gallery for Modern and Contemporary Art that is free for public viewing.
    3. Also necessary, are the names of the current artists on view, Daniel Gordon, Hitoshi Sugimoto, Candid Hofer, and Bernd & Hilla Becher.
    4. You should also place an image of of one of the works of each of the artists on this page.
  2. Page 2: 'GALLERY INFO PAGE—this page includes one image of the gallery provided, and text about its location and hours. Make sure that you re-state that it is a gallery of contemporary and Modern art open free for public viewing.
  3. Page 3: 'ARTISTS PAGE—This page includes a thumbnail image of each artist if you can find one. I have given you all the rest of the content, so please make an effort to do this. Just do a bit of a search online. It also includes the name of the each artist and where each one is from or currently living. When you click on the thumbnail images, the bios for each artist should open up, each on a separate page. All the information is provided in the artist_info download.
  4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in the current exhibitions of each artis placed in a thumbnail gallery, or a series of thumbnail galleries. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window. Make certain that the info for each image is there when you click to get the larger picture.
    - 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: MAILING LIST/CONTACT INFORMATION PAGE—Mailing List/Contact 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. This is due next week (7/20/07). 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 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 60% 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)—Among 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 11)—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 12)—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 12)—At the top of each of the content pages, you must insert the current date using JavaScript.
    5. Pull-Down Menus (covered week 13)—In the Navigation frame, providing time, we will create pull-down menus utilizing JavaScript and CSS for the Artists and Gallery links.
4. FILES: You will need the following files to complete the website.
  - LINK click here for information about the Gallery & Artists.
  - LINK images 1 click here and below to download images.
  - LINK images 2
  - LINK images 3
  - LINK images 4
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.

Saturday, July 21, 2007

Summer 2007

week 10: 7/20

Hi everyone,
Forgive me, but it will take a bit longer than usual to do the posting for this week's class. I'll put the Final Project information up and the Homework this weekend, but the class demonstration and notes will not be up until later on in the week.

I want to apologize to those of you who are unsatisfied with the class, and I suspect there are at least a few of you out there. Also, I want to apologize if any of you who are put off by me personally (I'm not much of a song and dance man). I know I have my flaws and weaknesses: I know, for example, that I can be impatient. I constantly struggle against this ungenerous part of my personality, but I promise you all that I will try harder. Please don't take it personally. It is not any of you, this is my issue, not yours.

But I do want you all to keep a few things in mind: the material that this class covers for most students is not easy material and so dealing with the subject certainly can be very frustrating. Programming and coding is unforgiving and very rigid, and there is very little room for mistakes as you all have seen. So, please try not to hold me responsible for your difficulties with the class. Also, please recognize that my primary concern is that all of you learn this stuff (if I am lucky, maybe I can spark a couple of you to actually enjoy it a little). As many of you know, I am often willing to meet with you before and after class and on other days. I respond to emails with questions about homework assignments, and I keep a blog that outlines EVERYTHING we do in class. I'm not certain whether you are aware of it, but this takes considerable time out of each week.

I also understand if you dread and put off giving the class the attention it requires. I think it is human nature to avoid difficult things. I do not take it personally if you do not enjoy this sort of thing, as there are many things I do not enjoy either. However, you must keep in mind that if you avoid the class, just as in life, there will be consequences that you must accept.

The best way to deal with difficult things in class as in life is not to avoid them, but to confront them head-on. If you find that JavaScript is difficult, then the only way to overcome the difficulty is to spend MORE time on it. I cannot make it easier for you. Only you can.
Carter-

TOPICS:
- LINK Review: creating a simple html table;
- LINK Review: putting a form into a table;
- LINK Review: Creating a layer with CSS;
- LINK Review: getElementById() function,
- LINK Review: event handlers,
HOMEWORK: For homework last week, you were to have completed the Introductory Page for the final website (see details below), which no one did. Therefore, to get full credit for homework next week, you are to complete the Introductory Page AND the Mailing List/Contact Information Page, which is basically a form page for the user to input his/her contact info. Again, further information is below.
Still, at this point, there will not be any JavaScript for these pages. It is a purely design and html/css exercise this week again as last. However, you must use a frameset to do this project, this means that in order to complete the homework, you not only need to do the Introductory & Mailing List/Contact Info Pages of content, but also the frameset document and the navigation document.

And remember, you may use Dreamweaver and ImageReady, but your XHTML code ABSOLUTELY MUST follow STRICT XHTML guidelines. If you are uncertain what these are, then refer to a book or a site like W3Schools for further information.
FINAL PROJECT: Starting this week we will be working on the final project which is a website for an Art Gallery, named Alpha Gallery. 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 (must be relevant to the gallery) with a series of links: Gallery Info, Artists, Image Gallery, Mailing List/Contact Information. 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. If we have time, we will create pull-down menus for the Artists and Gallery links.
    1. In addition to the imagery here, and the links, we should also see the name of the website Alpha_Gallery.com.
    2. It should say somewhere that it is a gallery for Modern and Contemporary Art that is free for public viewing.
    3. Also necessary, are the names of the current artists on view, Daniel Gordon, Hitoshi Sugimoto, Candid Hofer, and Bernd & Hilla Becher.
    4. You should also place an image of of one of the works of each of the artists on this page.
  2. Page 2: 'GALLERY INFO PAGE—this page includes one image of the gallery provided, and text about its location and hours. Make sure that you re-state that it is a gallery of contemporary and Modern art open free for public viewing.
  3. Page 3: 'ARTISTS PAGE—This page includes a thumbnail image of each artist if you can find one. I have given you all the rest of the content, so please make an effort to do this. Just do a bit of a search online. It also includes the name of the each artist and where each one is from or currently living. When you click on the thumbnail images, the bios for each artist should open up, each on a separate page. All the information is provided in the artist_info download.
  4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in the current exhibitions of each artis placed in a thumbnail gallery, or a series of thumbnail galleries. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window. Make certain that the info for each image is there when you click to get the larger picture.
    - 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: MAILING LIST/CONTACT INFORMATION PAGE—Mailing List/Contact 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. This is due next week (7/20/07). 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 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 60% 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)—Among 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 11)—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 12)—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 12)—At the top of each of the content pages, you must insert the current date using JavaScript.
    5. Pull-Down Menus (covered week 13)—In the Navigation frame, providing time, we will create pull-down menus utilizing JavaScript and CSS for the Artists and Gallery links.
4. FILES: You will need the following files to complete the website.
  - LINK click here for information about the Gallery & Artists.
  - LINK images 1 click here and below to download images.
  - LINK images 2
  - LINK images 3
  - LINK images 4

JavaScript

Tuesday, July 31, 2007

Summer 2007

week 11: 7/27

Saturday, July 21, 2007

Summer 2007

week 10: 7/20

About Me

Links

Previous Posts

Archives

information

	first name

	last name

	city

	state

	zip code

JavaScript

Tuesday, July 31, 2007

Summer 2007 week 11: 7/27

Saturday, July 21, 2007

Summer 2007 week 10: 7/20

About Me

Links

Previous Posts

Archives

Summer 2007

week 11: 7/27

Summer 2007

week 10: 7/20