Out: Feb 6th, 2015
Due: Feb 27th, 2015 (start of lecture)
CENG 256 – Lab 3
Part I: Fieldwork Investigating Existing Web Pages (16 marks)
Pick the home page of a mid-sized to large company or government website other than google (too
simple), the Toronto Star or Humber (as both will be used as examples in class). Pick a 2ndary site to
fall back on in case the one you pick doesn’t have what we will be looking for.
1. Robots.txt: Get the robots.txt file for your web site and copy it into your report and document
the source. (If the file is larger than 10 lines just copy a 10 line sample showing a few of the
disallows and sitemaps.) In your own words summarize what the robots file for this site is
telling any web crawlers to do or not do along with your reasoned guess as to why the web
administrator has done this. (4 marks)
2. Examine the HTML source of your web site and locate the following (12/2 marks each)
a. An inline style – copy and hilite the relevant section of code to your report and look up
and explain what the style does. To find it search for the attribute string: ‘style=’
b. An in document style –copy and hilite the code fragment and explain what it does. To
find it do a search for the tag: ‘<style ‘
c. An external style – hilte the code fragment of one such style and explain what it does.
To find it, search for a link of type text/css and follow the link and isolate the individual
definition. Record both the link and a CSS style fragment that is inside the 2nd file.
d. Find an inline JavaScript code fragment and copy the code fragment to your report.
What event is the code reacting to? Hilite and identify 2 JavaScript language features
being used, ie: Calculation, function call, looping.... You do not have to explain what the
final effect of the code is.
e. Repeat d) for in document JavaScript code by presenting a sample of one function.
f.
Repeat d) but refer to external JavaScript code. Record both the link and a JavaScript
function from the external file. You don’t have to report on any features this time.
NOTE: If web site does not have all of the above features add and document a
secondary web site as well. If that is also missing the feature report that it was not
found in either. At most 2 ‘not founds’ are allowed – beyond that keep looking.
Part II: Manipulating the DOM (20 marks)
Copy the web page sample3.html to use as a framework for this assignment.
1. Manipulating an ordered list. (13 marks)
The idea here is to take a list of lines in textArea1, use the split function to turn them into an
array, and then manipulate the ordered list. You should be able to reuse some of the same
ideas each time. Create 4 buttons and use jQuery and JavaScript to write code for the
following:
a. Set Items: Remove the strings from the ordered list. Sort the array (there’s a
function to do this – you don’t have to write a sort) and then add all the words as
separate list items in the ordered list. (3 marks)
b. Xfer Items: clear textArea1 and load the list items into textArea1, separated by
newlines. Note that the actions of both buttons would allow you to replace the list with
a sorted list. (2 marks)
c. Add Items: Instead of replacing the list items with the lines in textArea1, merge them
together. The basic idea is to concatenate the both arrays and insert them back. (3
marks)
d. Randomize the style: Randomly colour each of the the list 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-220. Randomize the size of the text as well in a range of 8-32 points.
(3 marks)
e. Create a drop down list of list types: UpperCase Alpha, LowerCase Alpha, UpperRoman,
LowerRoman, Numeric. {AaIi1} - Use the onChange event to change the style of the
list. (2 marks)
2. Documenting a web page using jQuery (6 marks)
The web page sample3,html has a script that generates a new web page. Move that script to
an external .js file and modify it as follows:
a. Clone table1 and insert it into the new web page (2)
b. Use jQuery to select all the tags in your web page. Build an associative array of tag
names and use it to build a frequency counter for all the tags found in sample3.html.
When you are done you’ll have an array that looks something like: (2)
freq[‘body’]=1
freq[‘h1’]=3
freq[‘img’]=4
....
The following code fragment should help:
if(typeof(freq[tagName])==’undefined’)
freq[tagName]=1;
else freq[tagName]++;
c. Create new rows in table1 and display the tag names and the frequencies. (3)
Self documenting a web page is easy but what would really be interesting is if we could use this
technique to investigate any such page. SOP means that you can’t have a web page from one location
investigate a web page from a different location. However there is a trick....