1. nerHTML property)
2.  

View the cookies

View the web page and fill out the questions. In your browser, the way to access cookies will vary. For Mozilla Firefox, go to your Preferences menu. (On a Mac the link is in the Firefox menu) Then select Properties. Click on Privacy in the menu. Then click the Show Cookies button. Enter the name of one of your cookies. You can see the cookie name, content (value), host, path and expires properties.

 

Problem 2:

As usual, this second problem is more challenging than the first, and will test your creativity and application of programming to web development. Your boss has asked you to create a page that displays a table with of 5 products. He liked your week3-1.html page and said you could use that page as a way to display the products. But he wants to build in some way to modify the table structure on the fly, and modify the data in the table dynamically. You will not create the shopping cart at this time.

 

Review:

This activity will require you to create objects dynamically as well as modify the styles using CSS and JavaScript. Review how to do this first, before starting this assignment.

 

TIPS: Using styles to style table elements

It’s useful to use the class and id selectors in the style sheet. This also applies to the header row, cells, and footer. You should feel comfortable working with CSS by now.

1. #productTable or table would modify the table.
2. #productTable th or just th would modify the table row

TIPS: Using JavaScript to style table elements and set the properties of elements

You can set any property using:

objectname.property = “new value”;

While this method works, and will override other settings, bgColor isn't a valid HTML attribute! However some browsers may still allow this.

oTHead.bgColor = "#A94442";

A better method is to use style. This is one of the methods in your text. Again, you could try to use bgColor, but it’s not the best because the bgColor property is not the current term.

oTHead.style.bgColor = "#A94442";

A better method is to use the combination of style and proper name, backgroundColor.

oTHead.style.backgroundColor = "#A94442";    

Cascading style rules can get very tricky when setting them inline and with CSS and JavaScript. Setting some attributes this way may not overwrite an inline style attribute.

 

Add an attribute to the HTML element

This way will work but remember that this just adds the attribute to the HTML element. It doesn’t validate the attribute name or value. So be careful with your code. Always look at the html generated and validate it with the validation tools you learned about earlier. You can add any attribute this way, not just style.

oTHead.setAttribute("style", "background-color: #A94442;");  

When you create elements dynamically, you can also set the attributes dynamically before or after you append the element to it’s parent.

oRow = document.createElement("tr");         
oRow.id = "TEST ROW";         
oTBody.appendChild(oRow);    

This process is the same, for each element you create. Create the element by passing the actual tag to the createElement method. Then you append the element to it’s parent element using appendChild.

oCell = document.createElement("td");                
oRow.appendChild(oCell);            
// You can also set the content inside the elements using innerHTML.
oCell.colSpan = "9";          
oCell.innerHTML = "TEST ROW";
// You can also set the class using className.
oCell.classnName = "myCell";         

Step 5. Create the overall structure for the page

1. Remember you are starting with your data table already completed. Focus on the functional requirements first. Then go back and make the design changes to the table.
2. Gather your data and create your basic page navigation structure.
3. Make a new copy of your week3-1.html page and name it week week5-2.html.
4. Add content to enhance your page and table. 

Step 6. Modify the structure for the tableModify the table structure in HTML

You need to make some changes to your table.

1. There should be no footer or header rows or summary or caption in the HTML code. Delete the header, footer, summary and caption from your web page (or comment them out).
2. Insert an HTML comment to comment out the last row in your table, which essentially removes the product from the web page.
3. Format the style of the table using CSS methods.
4. Use your creativity here!

• For example, your boss wants the retail price to have a line through it and colored red.
• Later you will use JavaScript and the DOM to style the table and cell elements and to format the data.

Your boss said that he would like you to insert two columns on the left side of the table.

• He wants one to store a button on the left column that says ‘Add to cart’. Use an image button. Recall an image button is an input tag where the image source is set to an image.
• In the second column include another image button. The button will be your ‘like’ button. But do not use the Facebook like icon! Pick your own image/icon.

Make sure your table ID is hard coded to productTable.

The body should be set to productBody.

Each row, the id is set to row1000, where the word row is appended to the ID. The class for each row needs to be set to prodrow. 

Use the code below as a guide to set up your HTML table.

 

Remember to customize your table

1. To receive ‘exceeds’ expectations you must create your own code! This is just a sample.
2. Build your css so you can modify the properties of the table head and table foot rows, caption and cells. Use a combination of CSS JavaScript to make the modifications! There are lots of examples on how to do this in your readings.
3. Remember your table data and appearance will and should be different
4.  

<table id="productTable">
  <tbody id="productBody">            
    <tr id="row539" class="prodrow">                
       <td><input type="image" src="../images/btnbuy.gif"></td>                
       <td><input type="image" src="../images/btnlike1.gif"></td>                
       <td><a href="product.html?productid=539">Waterford West
             Hampton D_O_F_ Glasses</a></td>    
       <td>WC-998-306-4094</td>                
       <td>Used</td>                
       <td>Set of 4 glasses.</td>                
       <td class="prodprice">$139.00</td>                
       <td>$119.00</td>                
       <td class="prodpics"><a href="../images/products/539.jpg" target="_blank">
           <img class="prodthumb" src="../images/thumbnails/539.gif"
                 alt="Product #539" /></a></td>                
    </tr>

Step 7. Create an interactive program to modify the tableBuild an interactive program with JavaScript

1. You decide that you will automate creating the table header, footer, summary and caption.
2. On the body element, when the page loads, call a function named init.
3. In the init function, call the createHeader, createFooter, createCaption and addData functions. No parameters are passed.
4. In a JavaScript, create functions called init, createHeader, createFooter, createCaption and addData.
5.  

Create the createFooter function

 

1. In the footer function display a footer row, that spans 9 columns and says “All saled are final.”
2. The id for the row is set to prodFooterRow.
3.  Set the footer row class name to productFoot.
4.  

Reminder: You will need to create the table and footer objects, set the properties for the row, create the cell, append the cell to the row, and then set the cell properties.

 

 

Create the createCaption function

 

1. In the function you will need the table and caption objects. You need to set the properties of the caption and append the caption to the table object.
2. The properties should set the text displayed to We have a broad range of products available and a line break.
3. The font size is 14 pixels, and aligned to the top. 
4.  

Create the createHeader function

 

1. In the createHeader function:
2. Create the table object using getElementById

• Create the header row object using createElement.

Append the header row to the table using appendChild.

In the function, set the table properties.

• Set the border to 10 with background color lightslategray.
• Set the width to 960 pixels.
• Set the summary to: This product list shows what is available at our rummage sale!
• Set the class name to productHead.

In the createHeader function, create the table head element.

• Set the table head element properties.
• Set the id and class to productHead.
• Append the head element to the table.

Create the header row element using the tr tag, and

• Set any required properties.
• Set the id to prodHeaderRow
• Append the row to the head element.

Create 1 array.

• The array called heading stores the 9 column heading names for each of the cells in the header row.

Create a loop. Inside the loop:

• Create each header cell.
• Modify the class name of the cell
• Display the text.
• Add the cell to the header row object.  

Step 8. Create an interactive program to insert data into a table

Create an interactive program using JavaScript and insert data into the table element. 

 

Create the addData function 

1. Create the table and body objects using getElementById.
2. You already have a body table element in the table, so you don’t need to append it to the table. We need to just add one row to the table body element.

Create an array with 10 elements that has the text for each cell.

• The last element should be set to the product ID value (such as 1000).
• Note that the product ID is not in the actual table. We are just using that array element to store the ID value.

Create the row with the createElement function

1. Set the id of the row.
2. Set the class name to prodrow.
3. Append the row to the table body element. Do not add it to the table or the body, but the table body element. (If you are not sure what element that is, look it up!)
4.  

Create an array to change the cell contents and properties

1. Create an array.
3. Loop through the array. In the loop:
4. Create the cells with createElement function.

• Set the cell properties to match your table properties and styles. (The properties you choose will vary based on your table.)
• Set the inner HTML value to the value in the array.
• If the cell is for the normal price set the class name to prodprice.
• If the cell is for the thumbnail set the class name to prodpics.
• Make sure in the HTML code, each cell in those columns has their class set to the same values. You can do this by hand or use the find and replace feature in your editor.
• Append the cell to the data row.

 

 

Step 9. DocumentationReview and document your programs

Document your program. * This means all HTML, CSS and JavaScript programs!

Use proper nesting and indentation for all code

User proper naming conventions for the IDs and names of elements, names of classes used in all code

Include comments in the all code files (name, date, purpose of code, functions, variables)

Save this file as Homework5_LastName.docx. Add this to your web site in the homework folder after you have completed both problems

Include a screen shot of both web pages in the browser showing that your programs ‘worked’.

Include a screen shot of all of our code, showing your indentation and nesting of the elements.