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


CENG256 – Lab 2

Part I: Field Work/Exploring (20 Marks)

Pick a major web site other than the Toronto Star (we did this in class) , Humber n or a search engine such as Google (too simple) and document the URL that you use. If the web site doesn’t have what is being asked for you may have to pick another. This section requires a written report along with code samples. Using this web site:

  1. Describe each of the following: (12/2 marks each)
  1. 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=’
  2. An embedded style –copy and hilite the code fragment and explain what it does. To find it do a search for the tag: ‘<style ‘
  3. 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. Record both the link and a CSS style inside the 2nd file.
  4. 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.... Here you might look for attributes that handle events as onclick=, onload=. Cut and paste a sample of the code and record the line numbers from the original file.
  5. Repeat d) for embedded JavaScript code by presenting a sample of one function.
  6. Repeat d) but refer to external JavaScript code. Record both the link and a JavaScript function from within the external file.

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 you need to find yet another website.

  1. Robots.txt: Get the robots.txt file for your web sit 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.) If there is a sitemap link, follow that through as well. 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. Your writeup can be speculative – tell me a reasonable story! (4 marks)
  2. MetaTags: Extract any 4 of these meta tags for your web site and include them in your report.
    In your own words summarize what these 4 meta tags are saying about the web page. (4 marks)

Part II: JavaScript & Events (15 Marks)
Use Firefox for these exercises.

4.  Using Different Events (6 marks)

  1. modify the code of the file dateDemo.html by replacing “onClick” in the tag with the id button1 with the following events: onFocus, onBlur, mouseDown, mouseOut. The Write up the minimum action required to get the event handler to react in each case. (2 marks)
  2. onBlur is considered to be a “form” event. Will onBlur work without the form tags? (1)
  3. Two new HTML5 events are onOnline and onOffline. Attach two event handlers to the body tag of your web page that bring up a simple alert. Do they work when you take the page on and offline? (Toggle Work Offline under the File menu item.) Provide a copy of the code you tried. (1)
  4. The sliderDemo using the new HTML5 type range on the course web site illustrates the use of the onInput event. (1)
    On your web page add an input tag of type range and use it to control the left margin of ‘output’. (1)
  5. Substitute onChange for onInput in the example and describe the difference in behaviour. (1)
  6. Setting/getting different properties. (5 marks)
    In part 1 you saw how the innerHTML property got set. In this exercise you are going to try to get and set different properties.

a.  Working with the innerHTML. Replace the event handler in the first button with:
onClick="element=document.getElementById('output');

oldValue=element.innerHTML;

newValue=prompt('Enter your name',oldValue);

element.innerHTML=newValue; "

Run the code. Now read the code and describe what each statement does. (This is slightly different from describing the overall effect.) (2)
At the prompt enter a string that contains HTML, ie: <b>your name </b> Record what you tried and what the effect was.

  1. Changing inline styles: In the above replace element.innerHTML ‘name’ with element.style.fontSize. When prompted replace the default value with each of the following, one at a time: 12px, 300%, 2em
    Each new value should have a different size.
    Replace fontSize with color. Using either w3Schools or Castro determine and record 2 different ways to specify a color. (1)
  2. Look up a different style attribute other than one related to color of your own chosing. Record it. Determine the kinds of values that this property requires. Change the code so it can change the property. What values did you try and did it work? (If it didn’t a record of what you tried is sufficient.) (1)

d.  Changing popup text. Use the following code, then roll your mouse over the displayed date. Record what happens. (1)
onClick="element=document.getElementById('output');
oldValue=element.title;

newValue=prompt('Enter a new popup text',oldValue);
element.title=newValue; "

  1. More redefining properties through code: working with href and target (4 Marks)
  2. Redefining the href property: Add the following hypertext link to the page. (2 marks)
    <a id=’myLink’ href=cisco.com target=’AnotherTab’>Go to Cisco</a>
    Add the following button:
    <input type='button' value='Jump'

onClick=" link=document.getElementById('myLink');

newLink=prompt('Enter a new link',link.href);
linkElement.href=newLink;" />
Test the hypertext link. Describe what happens. Next click on the button and replace the link with another URL. Click on the link again and describe what happens.

b.  Redefining the target property: Add another button
<input type='button' value='Select Target’

onClick=" linkElement=document.getElementById('myLink');

newTarget=prompt('Enter a new target',linkElement.target);
linkElement.target=newTarget;" />
Use the button to set the target to the following: _blank then Humber and each time click repeatedly click on the hyperlink to note the full effect. What is the different between a target of _blank vs Humber. (2 marks)