DMA106 JavaScript

Hi everyone,
Class went well on Friday, although I might've liked you have more under your belt, especially looping structures and creating tables. Please try and get this down.

Below please pay attention to the final project information. READ IT ALL!

See you Friday.
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 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. 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 Page of content, but also the frameset document and the navigation document.
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: FORM 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
Review:
1. Tables—See below the creation of a very simple table with five (5) rows and five (5) cells in each row:
  
  <table border="0px" width="100%">
  1 <tr>
  <td colspan="5"> </td>
  </tr>
  2 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  3 <tr>
  <td colspan="5"> </td>
  </tr>
  4 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  </tr>
  5 <tr>
  <td colspan="5"> </td>
  </tr>
  </table>
  This code creates the table that you see below:
  
  Next, here are a couple of tables with the width of a few cells changed, made narrower, plus with the addition of the form elements. The code is place below the tables:
2. Forms—In the next table, the form has been added to it. Below, you will find the code to create this table:
  
  type a number
  
  <form name="myForm" id="myForm"/>
  <table border="0px" width="100%">
  1 <tr>
  <td colspan="5"> </td>
  </tr>
  2 <tr>
  <td width="10px"> </td>
  <td align="right">type a number</td>
  <td width="200px">
  <input type="text" id="userNum"/>
  </td>
  <td> </td>
  <td> </td>
  </tr>
  3 <tr>
  <td colspan="5"> </td>
  </tr>
  4 <tr>
  <td> </td>
  <td> </td>
  <td>
  <input type="button" id="submit" value="submit">
  </td>
  <td> </td>
  <td> </td>
  </tr>
  5 <tr>
  <td colspan="5"> </td>
  </tr>
  </table>
  </form>
  
  When the borders are turned off, the table should look like this:
  
  type a number
3. CSS Layer—In the next table, the form has been added to it. Below, you will find the code to create this table:Next, the div tags are added before the first </form> tag and after the last one, along with a CSS #ID to style and create a layer:
  
  <style type="text/css">
  
  </style>
  
  The first <div> tag must also have the same ID as indicated in the CSS above, like so:
  <div id="layer1">
  This will change the simple table and form into a layer that may be positioned anywhere on the table. In addition, the ID will make the entire layer accessible to manipulation by our JavaScript.
  
  type a number
  
  Below, another CSS ID is added; however, in order for this to show up in the page, another pair of <div> must be added with the second ID, shown below applied
  
  <style type="text/css">
  
  </style>
  
  And then down below in the HTML of the document, together with the ID:
  
  <div id="layer2"> </div>
  With this new ID, then, applied to a second pair of <div> tags, a new layer is created, even though there is nothing but a blank space between the two tags of the second layer:
  
  type a number
4. document.getElementById()—If you recall from prior weeks, this function takes the action of searching through the entire document for a particular ID. Recall that ID's are assigned in a tag, and they may also be used by CSS to create layers, as we have done. We have also given IDs to our form elements. IDs are used by JavaScript to locate an item, this is why each ID must be unique. No two IDs can have the same name. JavaScript, once an ID is located, can manipulate the element in many ways.
  If a form element has an ID, then JavaScript can use the ID to extract data from it by calling on its value. The value of a text box is whatever the user types in the box, and the way JavaScript extracts it is as follows:
  document.getElementById("userNum").value
  This refers to whatever the user types in the box. If the user types nothing in the box, then the value is nothing. Once the data in the text box is extracted, however, in order for it to be used or manipulated, it must be stored in a variable. This is done like so:
  var multiple = document.getElementById("userNum").value
  Now, whatever the user types in the box will immediately be transferred and stored into the variable multiple, and, as you know, many things can be done with variables and the data stored inside of them.
5. Event Handlers—As mentioned in prior classes, an event here refers to computer events, such as loading a web-page, or closing a web-page, or clicking on a button or link, or tapping the enter key. All of these are events among many others defined by JavaScript.
  Now, JavaScript can use these defined events to cause yet other events to occur. For example, as mentioned, the clicking of a mouse is an event and this event could cause another event, like the appearance of an alert box over the browser window. It may do so with the event handler known as onclick: onclick = "alert('hello')";
  This is also the event handler that we will use for the submit button in our form, but instead of calling an alert() function, we will call our own user-defined function, which we will name myTable():
  <input type="button" id="submit" value="submit" onclick="myTable()"/>
6. Table Script—Once you get the HTML and CSS typed in your document and you have two layers similar to the ones shown above, and once you get the event handler typed into the button form element, it is time to type the script into the document. Since our event handler calls the myTable() function, then the name of our function in our script should be the same. It is as follows:
  
  <script language="javascript" type="text/javascript">
  <!- -
  1. function myTable()
  2. {
  3. var rowNum = document
  4. .getElementById("userNum").value;
  5. var theTable = "<table width="100%"
  6. border="1px">";
  7. for(var i=1; i<=rowNum; i++)
  8. {
  9. theTable += "<tr><td>" + i +
  10. "</td><td> </td></tr>"
  11. };
  12. theTable += "</table>"
  13. document.getElementById("layer2")
  14. .innerHTML = theTable;
  15. }
  //- - >
  </script>
  
  Now, let us go over this script line-by-line so that we can determine what is happening.
  Once you get the script to work, you will be able to click on the submit button in the form to activate it, or call the function;

JavaScript

Tuesday, July 17, 2007

Summer 2007

week 9: 7/13

0 Comments:

About Me

Previous Posts


	type a number


	type a number


	type a number


	type a number