DMA106 JavaScript

Saturday, March 24, 2007

Spring 2007

week 10: 3/23

hi everyone,
very happy with how class went on friday night. most of you have worked very hard this semester, and it shows. keep up the good work. only a few more weeks to go.

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: For homework this week, you must complete the Introductory Page for the final website (see details below). At this point, there will not be any JavaScript for this page. It is a purely design and html/css exercise this week.
FINAL PROJECT: Starting 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 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

Spring 2007

week 9: 3/16

*** NOTICE ***
No classes at TCI this evening, Friday, March 16, 2007

Lucky break to all of you. You will have an extra week to complete your mid-term projects. Please have them ready to turn in next week at the beginning of class. Also, please pay attention to this blog and make certain you have fulfilled all the requirements. Moreover, on Sunday or Monday I will post this week's homework.

Have a nice weekend. Carter-
*** NOTICE ***

Wednesday, March 14, 2007

Spring 2007

week 8: 3/09

Hi everybody,
Today is Wednesday, March 13, just two days before the mid-term project is due. As you should know, it consists of two parts: the multiplication table and the questions/answers. Although I do believe they are rather difficult problems to solve at first, I think once you understand what exactly is going on in the scripts, particularly the multiplication table, you'll find it is not really so terribly difficult. Somewhat tedious, perhaps, but not all that difficult. Basically what it amounts to is a simple for loop and some complicated concatenation.
The second script is perhaps even a little easier, although it does include the new topic of JavaScript Arrays. But really, an array is only just a fancy variable, so that concept shouldn't really be too difficult either. Both scripts contain some rather complicated concatenation and a simple for loop. I hope they aren't too taxing. But whatever the case, once you get these two things down, I think it's basically almost all downhill from here for the rest of the semester. The remainder of what we do this semester is just a series of repititions of some of the same things that we've already done, with some slightly different applications. There's really only one more difficult thing left for us this semester, and it doesn't come for another few weeks, rollover images and generating new browser windows. We'll work on this together in the development of an image gallery.
This week's entry discusses last Friday's class, the introduction of Arrays and their usage in for loops, both of which are necessary for part two of the mid-term project.

As you know from Friday's class, we didn't quite get to the end of the script we were working on. Suddenly, it was 9:00pm and I had an error in my script that I had to de-bug. Although it didn't take me long to find out what the error was, I didn't think it right to keep you while I tried to figure it out. What you will find below is everything that we did in class, including the final BUG-free script that we were working on when class ended. All you have to do is to input your questions and your answers, and it should work perfectly. You should also attempt to style the questions with bold and italic in the same way you see in the hand-out. Whatever I made bold, you should also make bold; whatever I made italic, you should do the same; etc. You will have the entire class to complete the project. Carter-

TOPICS:
- LINK Review: variables;
- LINK Declaring an Array
- LINK Populating an Array;
- LINK Accessing Array data;
- LINK Arrays and For Loops;
- LINK Creating Parallel Arrays.
HOMEWORK—Mid-Term Project, Part II: using examples from the class discussion of arrays and of for loops, and by adding two additional buttons to the form of the first part of the mid-term, print out the questions and then the answers in the same blank layer as used in Part I.
REVIEW: Variables—A variable is a named element in JavaScript that serves as a container for a single piece of data. If you can recall, to declare a new variable involves two (2) things, the var keyword, and a unique name, such as the example below:
var myVariable;
Once this is done, the new variable exists for use in the script; however, in order for it to serve its purpose, it must be given a piece of data to store. The data stored inside a variable is called its value. Providing a value to a variable for the first time in the script is known as initializing the variable, and it is done as demonstrated below:
myVariable = 100;
In this example it was given a numerical value, but it may also contain a string:
myVariable = "My name is Carter";
Although this string consists of a number of characters, 17 to be exact including spaces, it nonetheless counts as only one piece of data. Even if a string consists of many characters, they are unified by a pair of quotation marks, then the entire string is stored by the variable.
These two steps, declaring a variable, and initializing a variable, may be combined into one step as the example below demonstrates:
var myVariable ="My name is Carter";
Accessing the data stored by a variable is as simple as calling the name of the variable in some sort of output function, such as an alert() function or a document.write() as shown in the example below:
alert(myVariable);
INTRODUCE: Arrays—JavaScript Arrays are in fact modified variables. They are created and used in almost exactly the same way, and, moreover, they serve the same function, to store data.
1. Declaring Arrays—To declare an array involves the same terminology as declaring a variable in that the var keyword must be used, along with a unique name; however, in order to convert a normal variable into an array, the variable must be filled with what is known as the array object. This is done in the following way:
  var myFirstArray = new Array();
  Here you can see that instead of initializing the array by giving it some data to hold, it is initialized by creating a new array and placing it inside the variable. This converts it from a simple variable that can hold a single element of data into an object which can contain much more data than that. As has been stated, an array has the same function as a variable, to store data, but it can do so on a greatly expanded scale. Instead of storing only one piece of data, an array may store a relatively unlimited amount of data, an unlimited number of data elements.
2. Populating Arrays—Although declaring an array might be very similar to declaring a variable, the way that an array is given data to contain is somewhat different. Simply given the fact that it can contain more than one value, the name of the array will naturally refer to many data elements rather than just one value, so accessing the information held within the array must be handled differently. Likewise, putting the data inside the array, the process by which we add one piece of data after another to an array, and which is known as populating the array, must also be handled differently. As mentioned, the unique name of the array will refer to all the data stored inside of it; but each element of data must be given an index number in order to differentiate them from each other, data element number 1, data element number 2, data element number 3, etc. This is completed in a the special way seen below:
  var firstNames = new Array();
  firstNames[0] = "Julia";
  firstNames[1] = "Kim";
  firstNames[2] = "Carrie";
  firstNames[3] = "Guy";
  firstNames[4] = "Joel";
  firstNames[5] = "Carter";
  The first thing you should notice is that a number between square brackets refers to the value instead of simply the name of the array. Second, you should also notice that the numbers begin counting at zero (0) instead of one. This is a convention in most computer languages which count the number zero as an actual numerical value instead of the absence or lack of value. Zero is still a numerical value, albeit a 'zero value'. For this reason, it is considered the first value when counting up numerically, and it cannot be skipped. Third, our array ends at the number 5 above, which means that there are six data elements stored in the array. These numbers that refer to a data element in an array are known as index numbers, and one good thing to remember is that the last index number of an array is always one less than the actual number of elements in the array.
  An alternative way to populate an array is one which does away with the index in the initialization process, where the array is populated. This way can be more efficient, especially if the array has a relative few elements as it puts everything in a single line of code:
  var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
  Notice that it does away with the repetitive task of typing the name of the array over and over again as well as typing the index numbers. Instead, all of the data is typed between the parentheses following the array declaration. Nonetheless, simply because the index numbers are not typed, does not mean they are not needed. "Julia" still has the index number of zero (0), "Kim" has the index number of one (1), and so on, even if they are not typed in the declaration.
  For longer arrays, however, it is still recommended to type out the array names with their index numbers when populating the array as it is more explicit and specific that way. You can actually see which index number that corresponds to its data right beside it.
3. Accessing Arrays—Now that we have figured out how to get data into an array (input), we must figure out how to access the information held within the array so that, for instance, we may have control over output or otherwise manipulate that data. As mentioned, an array is basically a modified variable. Therefore, since access of the data held within a variable simply entails calling the variable by its unique name, we can expect that arrays will behave similarly. Below is an example of code that would declare and populate an array, and then afterwards, call on the array for output with an alert function. You should notice that the array was provided with data (the various names), otherwise known as populated, in a different way this time. Nonetheless, it provides the sam result as what was demonstrated above.:
  var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
  alert(firstNames);
  This code produces the following results: LINK
  
  If you clicked on the link above and read the contents of the alert box, you hopefully noticed that all the names in the array were displayed, separated only by commas. This makes sense if you understand what we did, we called the array by name by placing it within the alert function. Doing the same thing with a variable would cause the variable to reveal its contents, the data held within. An array does likewise, reveal, the entirety of its contents, all data elements held within.
  The tricky part comes when you want to call on a single element of data out of the whole of the array. For example, what if I wanted to access the third data element of the array above, "Carrie". How might I do so? The thing to keep in mind here is not the name of the array, but instead the individualized index numbers corresponding to each data element. Now, since I want the third data element, and, since I know that the index number is always one less (since counting begins at zero instead of one), then that means that the it has the index number of 2. As a result, to access that particular data element the statements must read as follow:
  var firstNames = new Array("Julia", "Kim", "Carrie", "Guy", "Joel", "Carter");
  alert(firstNames[2]);
  This time, the alert will read a single name: LINK
4. Accessing Arrays with For Loops—In the previous examples, it is clear how to access either all the data elements of an array, or only one of the data elements of an array. What is not clear is how to access each one of the elements individually, or a series of them. As it is, if we wanted to display all the elements of the array, whether we use an alert() or a document.write(), we would not be able to style them in the way we wanted, or space them out in a particular way. We would only see each element of data listed horizontally and separated with commas, and there would be very little we could do to change it. However, if we access each element, one at a time as a part of a series we can begin to see a way out of this. For example:
  // below is the input section of the script
  var first = new Array();
  first[0] = "Julia";
  first[1] = "Kim";
  first[2] = "Carrie";
  first[3] = "Guy";
  first[4] = "Joel";
  first[5] = "Carter";
  
  // below is the output section of the script
  document.write(first[0]);
  document.write(first[1]);
  document.write(first[2]);
  document.write(first[3]);
  document.write(first[4]);
  document.write(first[5]);
  
  The first section is familiar. This is where we populate the array. The second section should also be familiar: here is where we access the data within the array, but instead of doing so with an alert() function, we produce the data in a series of document.write() functions. This is a very simple process by which we get a list of names, but it can be simplified to a single document write by way of concatenation:
  document.write(first[0] + first[1] + first[2] + first[3] + first[4] + first[5]);
  See the results: LINK
  
  Hopefully, you can see the problem here: most obviously, all the names are run together. There must be spaces concatenated in to the document write like so:
  document.write(first[0] +", "+ first[1] +", "+ first[2] +", "+ first[3] +", "+ first[4] +", "+ first[5]);
  This will create a horizontal list of names separated by spaces and commas as they should be in order to be grammatically correct. To take it one step further to create a vertical list, instead of the spaces and commas, we should add in a bit of HTML:
  document.write(first[0] +"<br/>"+ first[1] +"<br/>"+ first[2] +"<br/>"+ first[3] +"<br/>"+ first[4] +"<br/>"+ first[5]);
  See the results: LINK
  
  But by taking these few steps, you might also notice the repetition in the statement. Many things are repeated more than once. In fact, everything is repeated in the statement more than once; that is, except the index numbers. The more you have to type, the more repetition there is, the more text and code you have to put into a script, the more opportunities for errors creep in. Therefore, it's always a good thing to seek out opportunites to make your code more efficient, to reduce the amount of repetition and thereby the amount of typing required. This is where the usefulness of looping statements we have learned about comes in to the picture. They allow us to type a statement or part of a statement one time, and then to loop through it as many times as we need. The document above is a perfect example, so let's narrow down the document.write() statement to its essential part, the part that is repeated over and over. That would be what is below:
  first[index number] +"<br/>"
  If you compare those three things; the name of the array first, the index number, and the <br/> tag, to the longer full document.write() function above, you see that it is really just a repetition of those three things over and over. A for loop can repeat it for us:
  for(var i=0; i<6; i++)
  From this bit of code, we can see from the for loop, that it will loop 6 times, and that means that the document.write() will run through 6 times. This is great, that is exactly what we want to happen: we have 6 data elements in the array, and our array will run through six times, but how do we change the index number each time we loop through our loop? The first time through the loop, the index number must be 0, the second time, it must be 1, the third time, 2, and so on. How might we get that to occur? Well, we need look no further than the for statement itself. The counter variable i changes from 0 to 6 during the course of the loop, just as the index number should. Why don't we then use the counter variable in place of the index number like so:
  for(var i=0; i<6; i++)
  {
  document.write(first[i] + "<br/>");
  }
  See the results: LINK
5. Creating Parallel Arrays—Often it is necessary to create multiple arrays to store multiple categories of data, one for first names, a second for last names, a third for telephone numbers, etc. Now, while this in itself may be useful, what makes it so powerul is the possibility of corresponding index numbers. If the index numbers of the first names array, correspond to the index numbers of the last names array, and so on, then a single index number can refer to a whole series of arrays across several categories of information.
  // below is the first array
  var first = new Array();
  first[0] = "Julia";
  first[1] = "Kim";
  first[2] = "Carrie";
  first[3] = "Guy";
  first[4] = "Joel";
  first[5] = "Carter";
  
  // below is the second array
  var last = new Array();
  last[0] = "Hutchinson";
  last[1] = "O'Brien";
  last[2] = "George";
  last[3] = "Emmanuel";
  last[4] = "Almoradie";
  last[5] = "Johnson";
  As you can see above, my name in the first array, for example, has the index number of 5. The same index number of the second array corresponds to my last name. The number 5, therefore, may refer to corresponding information in multiple arrays. I could go on to create arrays for other categories of information such as telephone number, address, city, state, zip, etc.
  Accessing multiple parallel arrays such as this is done in the same way as single arrays. The only difference is that there are even more repeating elements. See the example below of a loop that outputs the data from the two arrays above:
  for(var i=0; i<6; i++)
  {
  document.write(first[i] +" "+ last[i] + "<br/>");
  }
  See the results: LINK
  
  Knowing all of this should help you to solve Part II of the mid-term. Part II entails that you will type the questions in the following handout as the first array and the answers to those questions as the second array. They are to be printed out in the same blank layer used in Part I, and they are to be called by two additional buttons added to the form used in Part I.
  
  Here are the mid-term questions: LINK
MID-TERM: part III
1. HTML Layers—In last week's class, we began the lesson by editing the layers we had created the week before. Here they are below with the table borders showing:
  
  type a number
  
  In order to accommodate another script, we need to edit the two layers a bit by adding two new button elements to the first layer. So as to accomplish this in an orderly fashion, I first would like to add two new layers as shown in the layer below:
  
  type a number
  
  You should notice that I added two new rows, and that within one of the new rows, I added two new form elements. These are buttons with values of questions and answers. Eventually, these will correspond to new arrays that we will create.
2. Arrays—Now that we have the table within the layer edited, and our button form elements placed within them, we can go about creating the necessary function. Before we do that, however, we need to create the two arrays necessary to run the function. As you know from the mid-term assignment, we are going to generate a function which prints out the questions and answers into the 2nd layer provided, just as we did for part of the multiplication table. For this function, we will need two arrays: one for questions and one for answers. Let us begin there. These arrays will be similar to the parallel arrays we worked on above:
  // below is the first array
  var questions = new Array();
  questions[0] = "This will be the <em>first</em> in the mid-term handout provided to you two weeks ago.";
  questions[1] = "This will be the <em>second</em> question in the mid-term handout provided to you two weeks ago.";
  questions[2] = "This will be the <em>third</em> question in the mid-term handout provided to you two weeks ago.";
  questions[3] = "This will be the <em>fourth</em> question in the mid-term handout provided to you two weeks ago.";
  questions[4] = "This will be the <em>fifth</em> question in the mid-term handout provided to you two weeks ago.";
  questions[5] = "This will be the <em>sixth</em> question in the mid-term handout provided to you two weeks ago.";
  
  // below is the second array
  var answers = new Array();
  answers[0] = "This will be the answer to the <em>first</em> question in the mid-term handout provided to you two weeks ago.";
  answers[1] = "This will be the answer to the <em>second</em> question in the mid-term handout provided to you two weeks ago.";
  answers[2] = "This will be the answer to the <em>third</em> question in the mid-term handout provided to you two weeks ago.";
  answers[3] = "This will be the answer to the <em>fourth</em> question in the mid-term handout provided to you two weeks ago.";
  answers[4] = "This will be the answer to the <em>fifth</em> question in the mid-term handout provided to you two weeks ago.";
  answers[5] = "This will be the answer to the <em>sixth</em> question in the mid-term handout provided to you two weeks ago.";
  A couple things that you should notice about the code typed above: first, the arrays are not typed within any user-defined function; second, within each array value, HTML code is included, the <em> tags. I did not type the arrays within any function because if I had, only that one function would have been able to access the data in the arrays. We would say that the array was local to that function. It would be as if it did not exist to the any other function, if we had decided at some later time to try to write in some code that accessed the array. Whatever array or variable is typed within a particular function is available only to that function. Just in case, therefore, I modified my scripts later to access the arrays from other functions, I typed the arrays outside the curly brackets of any function.
  Also, since you should know that one of the requirements for this part of the mid-term project is to reflect whatever was bold or italic from my hand-out in your function, you will have to add HTML and/or CSS into the text of your questions and answers that provide the desired results. An example of this are the <em> tags in the questions array above.
3. Function—So we have modified the table within the first layer, and we have created our arrays which contain all the data we will need for this function—a mini-database. Now, what we need to do is to create the actual function itself.
  Therefore, first we must consider what exactly we wish to have happen: to print out, on the one hand, all of the questions if we click on the questions button; and then, on the other hand, to print out all the answers if we click on the answers button. Perhaps the first thing that pops into your mind to do is to create two separate functions, one for the questions, and one for the answers, and that would be all right and work just fine. However, if you reconsider for a moment what those two functions must accomplish, what their actual functions would be, then you will realize that they must do pretty much the same thing: each of those hypothetical functions must simply print out data from an array, more simply put, output. At the base of it, both of them only do this one thing, and the only thing that really changes is the array. For the questions our output function accesses the questions array, and for the answers our output function accesses the answers array. It's as simple as that. Therefore, what we must go about doing is to format the data from the array so that it is easy for the user to read.
  From our initial exercise with arrays above, we know that to output data from an array is a repetitive action, and we also know that repetitive actions are prime candiditates for looping statements. So let's begin by creating out function and initiating a for loop:
  function output()
  {
  for(var i=0; i < number of q/a in arrays; i++)
  {
  document.getElementById("layer ID").innerHTML =
  name of the array[i] + "<br/>"
  }
  }
  1. Looking at the code above, we can see that there are three unknowns typed in red. The first is easy to figure out: all you have to do is look at the hand-out that I have provided to you to find out how many questions there are and put the number in the script where it belongs; however, if you are uncertain what the number is, actually, how many array elements there are within the array, then you can refer to what is known as the length property of the array. This tells you how many elements there are in a particular array. As a result of knowing this, all you need to do is type the following instead of the number:
    name of array.length
  2. The second unknown, the layer ID, is even easier to determine. Simply scroll down into your CSS to find out what the ID is that you gave to your second layer, the blank one. This is the ID that you will type between the parenthesis of the document.getElementById() function so that the browser knows where—into which layer—you want to print out the questions and answers.
  3. The third unknown is a little more complicated: on the one hand, if we click on one button we wish to access one array; and on the other hand, if we click on the other button, we wish to access the other array. So how are we to specify which array, the name of a particular array, if it could be either of them?
  4. Function II—Now that we have figured out how to pass values from hyperlinks to functions, and now that we also know how to convert string values to javascript code we can go back to our questions/answers function. Let's review where we left off:
    
    function output()
    {
    for(var i=0; i < array name.length; i++)
    {
      document.getElementById("layer ID").innerHTML =
       array name[i] + "<br/>"
    }
    }
    
    Next, we must pass values from two links down below:
    
    <a href="javascript:output("questions")">link one</a>
    <a href="javascript:output("answers")">link two</a>
    
    In the output function, these values will be stored in the userChoice variable:
    
    function output(userChoice)
    {
    for(var i=0; i < array name.length; i++)
    {
      document.getElementById("layer ID").innerHTML =
       array name[i] + "<br/>"
    }
    }
    
    Since userChoice contains the values "questions" and "answers", which is the same as the names of the arrays, wherever we see array name, we can replace it with userChoice:
    
    function output(userChoice)
    {
    for(var i=0; i < userChoice.length; i++)
    {
      document.getElementById("layer ID").innerHTML =
       userChoice[i] + "<br/>"
    }
    }
    
    However, we have to remember that userChoice contains a string value. Therefore, we have to use the eval() function:
    
    function output(userChoice)
    {
    for(var i=0; i < eval(userChoice).length; i++)
    {
      document.getElementById("layer ID").innerHTML =
       eval(userChoice)[i] + "<br/>"
    }
    }
    
    The eval function will convert the strings within the userChoice variable into code, which is the name of the two arrays.

JavaScript

Saturday, March 24, 2007

Spring 2007

week 10: 3/23

Spring 2007

week 9: 3/16

Wednesday, March 14, 2007

Spring 2007

week 8: 3/09

About Me

Links

Previous Posts

Archives

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

JavaScript

Saturday, March 24, 2007

Spring 2007 week 10: 3/23

Spring 2007 week 9: 3/16

Wednesday, March 14, 2007

Spring 2007 week 8: 3/09

About Me

Links

Previous Posts

Archives

Spring 2007

week 10: 3/23

Spring 2007

week 9: 3/16

Spring 2007

week 8: 3/09