Out: Jan 31, 2017
Due: February 14, 2017 (start of lecture)

CENG256: Lab 3

There are 45 marks in this assignment. It is marked out of 40.

Preliminary Step: Installing Firebug (It’s preinstalled in the lab)

  1. Installing Firefox on your machine
  2. If you have a version of Firefox greater than 49 you need to downgrade. Earlier versions can be downloaded from:
  3. Once you’ve installed Firefox from the menu select Tools | Add-ons or from the 3-bar menu at the top right select “Add ons”
  4. “Get Add-ons” from the side. In the search box in the upper right type in “Firebug”
  5. Select See all 7400+ Addons - Firebug itself should be at the top of the list. Click to download it and install. The current version is 2.0.18.
  6. In the lab:
  7. Firebug is installed but not activated. Go to Tools | Add-on from the menu bar or from the 3 bar menu at the top right select “Add-ons”.
  8. Click on “Extensions” and then the “Enable” button next to Firebug.
  9. An insect icon with a drop down menu will appear on the menu bar. From the drop down menu select “Enable All Panels”. The insect icon will change colours and a series of tabs will appear at the bottom of the screen.

Part I: Learning to Use Firebug (18 marks)
Wrtie up answers to each of the following:

  1. Using FireBug To Look at HTML (6 marks)
    Bring up the web page htmlError.html and show the page source. At the same time click on the HTML tab in the FireBug control panel and expand all of the nodes fully. This represents how the Browser interprets the HTML as opposed to the original source. At the same time bring up the original source code of the web page. There are 5 errors in the web page – describe what the browser version does with each:
  2. There is an H1 tag that appears in the HEAD section.
  3. In one of the list items the bold and italic tags are improperly nested.
  4. There are 2 forms, but the first one is improperly ended with <form> instead of </form>
  5. There is a TABLE with some text outside of any of the TR tags.
  6. None of the <LI> tags have an </LI>
  7. Use Firebug to fix any of the above problems that still need fixing. You are only editing a copy – the original will be unchanged. Write up how you edited these changes.
  8. Using Firebug to look at CSS (4 marks/1 each)
    Bring up the web page 3Level.html which contains inline, embedded and external CSS.
    Using the HTML tab click on the H3 tag and in the right panel click on CSS
  9. How can you tell which styles apply?
  10. Edit each of the attribute values once. What did you change the values to and were you successful in changing the appearance of the page.
  11. Add an entirely new attribute to the web page using the sample page used in class of CSS effects. What did you try and what was the result?
  12. Find the web page of the major company you used in Lab2. Record the URL in your answer. Go to the Console tab and in the drop down list of options next to it enable all CSS and HTML Errors. Reload the web page. Summarize the errors (if any).
  1. Using Firebug to look at Network Loading (4/2 each)
  2. Bring up web page loadingProblems.html and view the console tab. Summarize the problems that occurred when loading the web page.
  3. Click on the Network tab. In the dropdown disable the cache. Reload the web site you used in exercise 2d. How long did it take to load the page? How many separate components were loaded? Which component took the most time to load?
  4. Using Firebug to Trace JavaScript (4 marks)
    Bring up the web page scriptTrace.html. Add a break point to the first line of executable code in the function findMin. Run the program using the 1st button. When it stops inside findMin step through the program and answer the following questions. To reset values, reload the page.
  5. What is the data type of i before the first call to Math.sqrt? After?
  6. What are the values of position when minItem changes?
  7. When position is 2, change the value of list by typing in and executing the following code in the command panel:
    list[2.5]= 'Elmer'; list['CENG256’]= 'Aaron'; list[-1]= 'Terry';
    Use the Watch window and enter list as your new watch expression to verify and report whether or not these values are now part of the associative array list.
    Warning: I’ve made the appropriate change here but a quote in Word ‘ is not the same as the ASCII character ' . JavaScript only uses ASCII symbols for quotations. If you look closely at the two symbols, the ASCIII ' is a vertical line and Word’s quote ‘ is at an angle. The same applies for “ vs ". Other potential problems may arise when copying multiple lines - Windows uses carriage return and line feed ("\r\n") as a line ending, which Unix uses just line feed ("\n").
    Continue stepping through the code until the function is complete. Does the code check the new values? When?
  8. Repeat steps a., b. and c. for the 2nd button.

Part II: Selectors with .querySelector and .querySelectorAll (25 marks)
Preliminary Step (3 marks)
For this exercise you will need to copy the HTML form based web page that you created last term in CENG200 in assignment 5 or 6. If for some reason you do not have one, make a copy of my formDemo.html and create a page based on either the 1st or 2nd form inside the page. Call your form: CENG256Lab3.html and put it directly in your public_html directory.
Make sure that your form has the following features: (3 marks)

  1. All of your form related tags are between <form> and </form>
  2. That you have at least 7 form related tags inside your form. For the purpose of this assignment Input forms of different types count as different tags. Form tags include: input, button, textarea, select, label and option. input types include: button, checkbox, color, date, datetime, email, file, hidden, number, password,radio, range,reset, submit,tel,text,time,url. (This list is not complete, but gives you 20+ possibilities.)
  3. Give every tag that allows you to enter data in some way (including input type=hidden if you have one) a name attribute if it doesn’t have one already. For most data fields except radio buttons the name’s value will be unique.
  4. You should have at least one set of radio buttons and several checkboxes.
  5. Make sure your have 2-3 labels. Give themeach unique idattributes and give each a unique inline style consisting of 3 different properties.
  6. Write a statement delcaring that your form matches these requirements and summarizing what you had to change to make this happen.

Open up the Firebug console and record the commands used, then add the commands to an inline script inside the web page in a style similar to Lab 1 with comments indicating which questions are being answered. A status report is requred for both questions. (2 marks)

  1. Using document.querySelector(selectorPattern) (6 marks, 1 mark each)
  2. Retrieve one of your labels using its id and change the text and the style.
  3. Retrieve the submit button and change it’s label.
  4. Retrieve one of your labels using one of it’s style values. (ie: a label with the color cyan) and display the element in the console.
  5. Retrieve a checkbox based on the 1st three characters of its name. (The name should have more than 3 characters) and display the element in the console.
  6. Retreive an input box based on the last 4 characters of its name and change its value.
  7. Put all of these statements into a single function and attach this function to a button labelled “Part I: Q1” so that when you click the button the script executes.
  8. Using document.querySelectorAll(selectorPattern)first experiment in the console then create appropriately labelled separate buttons attached to functions to do each of the following. Since .querySelectorAll retrieves a NodeList, you will need to practice writing a loop that goes through one. A reminder that the last 2 entries in a NodeList are the length property and the item function, and not actual HTML elements. (14 marks)
  9. Write a function that retrieves all of your checkboxes and flips their state. If the checkbox is checked, make it unchecked. If uncheck, make it checked. (2 marks)
  10. All radio buttons in a group have the same value for their name attributes – that’s what makes it a group. Write a function that toggles between the first and 2nd button in one of your groups. If the first button is checked, check the 2nd button, and vice versa. (2 marks)
  11. Randomly colour each of the labels items. So that none of the text is invisible against a white background make sure that the range of each of the rbg values is from 0-200. Randomize the size of the text as well in a range of 8-32 points. (3 marks)
  12. Write a function that retrieves all your text boxes and text areas in a single call to .querySelectorAll, removes any numbers inside the text and changes the text to upper case. ie: “Call 555-341-1988 tomorrow” => “CALL – TOMORROW”. It’s suggested that you give these elements default values. (3 marks)
  13. Create an empty table at the end of your form with the following headings.
  14. Delete all the rows in your table except for the 1st one. (1 mark)
  15. Retrieve all the elements of your form that have values attributes. For each element fill in the row with the appropriate values. (3 marks)

ID / TagName / Type / Value