DMA106 JavaScript

Hi everybody, it seems that blogger.com is having issues today, and as a result I haven't been able to post any files for the final project. It should be up tonight late or tomorrow morning depending on if their server becomes available in the next couple of hours

Whatever the situation, you should keep checking back here over the next day or so to see if it is up. Moreover, I'll make a full posting for the last class during the week.

Please let me know if you have any other questions or problems. Carter-

Okay then, it seems that this morning things are on the blogger site are going much quicker and that I will be able to upload the files I need so that you all can have them for your final projects. So, let's get right to it. Your final project consists of a small web-site of six (6) pages of content. This does not mean six html files, no, but six pages OF CONTENT. There may be other files that you will produce that do not contain any content, such as frameset files.

TOPICS:
- Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
- Form Validation;
  - LINK Creating the Table;
  - LINK Adding the Form;
  - LINK Designing the Layer;
  - LINK Adding the IDs;
  - LINK Altering Properties;
  - LINK Using a Conditional;
  - LINK Submitting Completed Form;
HOMEWORK—Final Project, Part I: Starting this week, the homework for each class is part of the final project. It is not extraneous to what you will be required to do and what will be due the last day of class. If you produce your homework each week, you will be largely finished with the project well before it is due.
Part I, due the next class (11/17/06⁙week 10), consists of two things:
- A Logo—Create a new logo for the site described below. This will be used on the intro page as well as at the top of every other page in the site. It must follow the same complimentary color scheme described below.
- A Color Scheme—You must decide upon your color scheme for your site by Friday. This does not mean it cannot change somewhat over the course of your work during the next 5 weeks; but rather, it is meant as a initial design decision as a way for you to begin to determine the direction it will take.
  LINK
  View the CSS code of the following document at this link. The code has directions within it instructing you what to do. The link takes you to the document you will use to demonstrate your color scheme to me. Once you have clicked on the link, choose view << source to see the code. All you need to look at is the top of the document in the CSS. Please send me an email, or ask me before Friday's class if you are unclear what I want.
FINAL PROJECT: Democracy Now! website Re-Design The current Democracy Now! website is found here (LINK), and you should look through the site and familiarize yourself with its topic and mission. Knowing what the site is about is imperative to making design decisions for color and layout. Your project is to re-design the parts of the site detailed below.
1. CONTENT REQUIREMENTS:
  1. Page 1: INTRO PAGE—This page has no requirements other than the technical and design requirements for the entire site (see below: LINK). All it consists of is some sort of graphic introduction, an image, or flash, or whatever you prefer to introduce us to the site, and a link to the primary frameset (index) of the site. It contains NO OTHER CONTENT.
  2. Page 2: HEADLINES PAGE—This page includes all the headlines, summaries, images and captions which I will provide to you. If you wish to add any additional headlines and images to this page, please do so. The images and text required for this page will be given to you near the end of the term. We will save this page for last so that the headlines are as current as possible.
  3. Page 3: MAIN PAGE—This page must have the introductory text, About Democracy Now! that I will provide you, as well as a couple of images that I will also provide to you. Any other text or images that you find and wish to include is welcomed and encouraged; however, it must remain on the topic of the site.
    You must use all the information on the following two (2) pages in your main page found here:
    LINK (about)
    and here:
    LINK (history)
    The images required for these pages are here:
    LINK
  4. Page 4: IMAGE GALLERY PAGE—This page must have ALL the images and caption text that I will provide you. There will be at least ten (10) images. Once again, please use additional images and captions for them if you wish.
    The images required for these pages are here:
    LINK
    and the captions for the images are here (you should note that the name of the image precedes the caption):
    LINK
  5. Page 5: FORM I PAGE—This page will consist of the first form of two that will be required for the site, the submit idea form. It must utilize all of the same form fields as the form found in the current site:
    LINK
  6. Page 6: FORM II PAGE—This page will consist of the second form of two that will be required for the site, the volunteer form. It must utilize ALL of the same form fields as the form found here:
    LINK
2. DESIGN REQUIREMENTS:
  1. Color Scheme—you must use what is known as a Complimentary Color Scheme. A complimentary color scheme is a two-color scheme, but it is basically a scheme in which the large majority of the site is done monochromatically. Monochromatic means one color.
    This means that you start off with a site that follows a monochromatic scheme, which means that everything is to be some tint or shade of the same color. If you choose blue as your color, then that means absolutely everything in the site must be some variation of blue, including images. If you wish to show color images, then make the images clickable to link to larger, full-color versions of them.
    Once you establish this primary color, then you select its compliment to use as an accent color, for times when you need to focus attention or when you require greater contrast. Therefore, if blue is the main color for most of your site, then you would use some version of its compliment, orange, as your accent color (blue & orange, red & green, and yellow & purple).
  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 9-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 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 13)—At the top of each of the content pages, you must insert the current date using JavaScript.
FORM VALIDATION I:
1. Creating the Table—For organizing and laying-out our form, we are going to start with a table similar to one we have used in the past:
  LINK (week 6)
  Since we have gone over the process of creating a table step-by-step several times already, I will just show the desired table and its code below:
  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> </td>
  <td width="100px"> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">last name</td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">city</td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">state</td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td align="right">zip code</td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  
  <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
2. Adding the Form—The following table insterts the form elements and form tags.
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
  
  <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> </td>
  <td> </td>
  <td><input type="button" value="submit"/></td>
  <td> </td>
  </tr>
  
  <tr>
  <td colspan="5"> ;</td>
  </tr>
  </table>
  </form>
3. Designing the Layer—In order to create a layer and add needed designing to it, the following CSS must be typed into the head of the document:
  <style type="text/css">
  
  </style>
4. Adding the IDs—So that the styling from the CSS code above, the layer id must be applied to the< span class="tag"><div> div tags surrounding the form and table. While we're at it, we'll add a few other IDs that will assist us with our JavaScript later:
  <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"> ;</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 appear as follows:
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code
5. Altering Properties—Before we begin the actual scripting, 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">
  
  </script>
  Click on the submit button above to see the function at work.
6. Adding a 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;"
  documetn.getElementById("zipWarn").innerHTML = "";
  }
  information
  
  first name
  
  last name
  
  city
  
  state
  
  zip code

JavaScript

Sunday, November 12, 2006

week 9: 11/10/06

0 Comments:

About Me

Previous Posts

information

	first name

	last name

	city

	state

	zip code

information

	first name

	last name

	city

	state

	zip code

information

	first name

	last name

	city

	state

	zip code

information

	first name

	last name

	city

	state

	zip code