12/12/05 CISC103 Review Session

Announcements
=============

(1) There is a file online with some sample questions.

It took 5 hours to create and I only got through 3 1/2 lectures
(I'm not even done with 9/15).   So, I'd _like_ to promise you that
I'll finish the "entire semester" in time for you to study from it
for the final, but I obviously can't do that.

I'll do the best I can to make as many of these as time permits between
now and the exam

(2) Linda Magner found one error on the answer key for the multiple
    choice for the first midterm, so some of you may find your Midterm
    exam grade for the multiple choice go up by a few points.  To be
    nice, I won't take any points away from those that "mistakenly"
    got the question marked "correct". :-)

    I'll send details in email later.

(3) During today's review session, we'll go over which readings from the
    original calendar we did not cover in detail (or at all) and are 
    "unlikely" to be on the exam, vs. which readings you should 
    definitely review.

    But after that, I would really prefer to spend time answering questions
    about material, rather than "are you going to ask us about x".
  
    Instead, phrase your question like this "what kind of questions would
    you be likely to ask us about x"?


Questions from Students:

Q1: Will the format of the exam, e.g. the split between multiple choice and
short answer be about the same or different?

A1: I don't really know.  Until I start making up the exam, it is difficult
to say.  However, my best _guess_ is that it will be similar.

Q2: On the first exam, rather than an open-ended question, you just
asked us to fill in a few lines of something already started.  Will it
be more like that?

A2: My guess is this: I would prefer to give you questions like that, because
they are (a) easier for you write (b) easier for me to grade (c) they
get at the real issue of whether you know what you are doing more effectively.

So if such questions are so much better, why don't I committ up front to
only giving you such questions?

These questions also take a lot longer to come up with.

I have to balance my time between giving you sample quesitons, which is also
time consuming, and spending time actually making the exam... if I get the
balance wrong, you might have longer exam questions...

Reading Calendar:

  Don't worry about Chapters 19 and 20 from the Deitel/Deitel/Goldberg
  (i.e. Chapter 19, Dreamweaver, and Chapter 20, XML).


  Regarding Chapters 8,9,10,11,12: Focus on the things we covered
  in lecture and the things that "came up" in the JavaScript programming
  that we did in the labs.   Those are the things I'm most likely
  to ask about.

  Also: the "original style labs" (labs 1-7), be sure to re-read the
  stuff that you may have just "breezed through" the first time around.
  (All those boxes like "to extend your knowledge", "visual summary", etc.)

  Look at the end of chapter questions in the Chapters in the Essentials for
  Design books that were covered in labs 1-7.

Apart from that, focus primarily on lecture notes, and labs, becuase
that's where I'm focussing in making up exam questions.



Q3: Validation: What kinds of questions would you ask about validation?
    or valid XHTML?

A3:  First, look at the lecture notes from:

http://copland.udel.edu/~pconrad/cisc103/05F/lect/10.20/10.20.txt

to get some information about DOCTYPE and "DTDs" and stuff like that.

Second, some rules for making things "valid XHTML":


(1) Remember that attribute values must be in quotes

   quotes can be single quotes or double quotes

     valid:  <p style="color:red">Hi!</p>

    not valid: <p style=color:red>Hi!</p>


     valid:  <div id='foo'><p>Hi!</p></div>

    not valid: <div id=foo><p>Hi!</p></div>



(2) XHTML element names must be lowercase

       <p>This is valid.</p>

       <P>This is not valid</P>

     
(3) attribute names be in lower case

   valid: <input type="button" value="press me" onclick="doIt();" />

   not valid:
       <input type="button" value="press me" onClick="doIt();" />

     (because onClick needs to be all lower case)
      

(4) rather than the <FONT> tag, it is better to use the "style" attribute
   with CSS.

   See lecture notes from 09.15 and 09.20
   

(5) All elements must be properly nested.

    Properly nested means every open tag must be closed.

      (Or, use "self closing tags").

    No overlapping elements.

     Good:    <p>This is <em>in italics</em> and this isn't.</p>


     Bad:    <p>This has  <em>overlapping <strong>tags</em> and </strong>
                   and is therefore invalid.</p>

     Bad:    <p>This is  <em>another <strong>example</em> of </strong>
                   some text.</p>

     Good:    <p>This is  <em>another <strong>example</strong></em>
                            <strong>of</strong>
                   some text.</p>



     

(6) Attribute values should be set with
 
      attributeName="attributeValue"

    not with colons (colons, by the way, are used with CSS properties).

 
    For example:

   valid:  <p style="color:red">This is a paragraph with red text</p>

      Question: inside the attribute value for style, what language
                is being used?
      Answer: CSS

   not valid:
        <p style:"color=red">This is an example of an error</p>


   valid: <input type="button" value="press me" onclick="doIt();" />

   not valid:
       <input type="button" value="press me" onClick="doIt();" />

      not valid XHTML because in XHTML (strict), all attribute names
      should be in lowercase.

      I think that there is some context in JavaScript where
      you can refer to the event handlers such as onClick, and in
      JavaScript, it might be the case that you need the "camel case"
      (camel case is putting capital letters in the middle of 
       a word like onClick).

   Sample exam questions:

    (a) Circle the part of this line that is in CSS:

 
      <input type="button" value="click me" 
               style="color:red" onclick="myFunction();" /> 
   
    (2) Circle the part of this line that is in JavaScript

      <input type="button" value="click me" 
               style="color:red" onclick="myFunction();" /> 


    Answers: (1) You would circle:  color:red

                   and ONLY that for full credit.   The quotation marks
                   and the style= part are NOT part of the CSS itself.

             (2) You would circle:  myFunction();

     
   (3)  How many XHTML elements are shown here?
        How many XHTML attributes?
        How many CSS properties?
        How many JavaScript function calls?

         <input type="button" value="click me" 
               style="color:red" onclick="myFunction();" /> 


         A: XHTML elements: 1 input element
            XHTML attributes: 4: type, value, style, onclick
            CSS properties: 1 color
            JavaScript functions: 1 a call to myFunction()


   (4)  How many XHTML elements are shown here?
        How many XHTML attributes?
        How many CSS properties?
        How many JavaScript function calls?

         <input type="button" value="click me" 
               style="color:red; background-color:green;"
                onclick="compute(); showInput();" /> 


         A: XHTML elements: 1 input element
            XHTML attributes: 4: type, value, style, onclick
            CSS properties: 2 color, background-color
            JavaScript functions: 2 a call to compute() and a call to
                                 showInput();


   (5)  How many parameters to JavaScript functions are shown here?
        How many JavaScript binary operators?

         <input type="button" value="click me" 
               style="color:red; background-color:green;"
                onclick="compute(); showInput('<td>' + i, 3);" /> 

        A: JavaScript function parameters: 
             Two: '<td>' + i  is the first parameter
                       3  is the second parameter

           JavaScript binary operators:  one: +
                 which in context means "string concatenation"

           A binary operator is an operator that takes two operands
              a left operand and right operand.
           It is called binary becuase it takes TWO operands.
    
           A unary operator takes one operand like 

                 document.write(-x);   // the negative sign has one operand
                                       // so it is a unary operator
                             






Review of div and span tags:


div tags are used to mark a portion of your document consisting of
block level elements (paragraph-like things, including 

 <p>A paragraph</p>

 <h1>A heading</h1>

 <ol> 
   <li>list item 1</li>
   <li>list item 2</li>
 </ol>

 <table>
    ...
 </table>

 <form>
   ...
 </form>

A div element would consist of some number of these.


A span element is used inside a block level element, e.g.



<p>This is a <span>lovely</span> day.</p>

<table>
 <tr><td>Jeep</td><td>Wrangler</td><td>4.0 litre</td>
  <td><span>gas guzzler</span></td><td><span>fun!</span</td></tr>
</table>

The above span tags would do ABSOLUTELY NOTHING.  A span tag or div
tag is only useful if it has some attributes on it.

For example if I put on style, or id attributes.

We have emphasized the style and id attributes, but there are several
different attribute values that can go on a span or div tag, including
various event handlers such as "onmouseover".






By the way, another sample question:

Question: If I wrote the following, what is wrong with it and what do
    I need to do to fix it:

<p>Here is an example of a paragraph with a 
<span onmouseover="alert("Hi");">span element</span>
in the middle.</p>


Answer: The " inside the onmouseover attribute value effectively
  closes the quotes.

  Three possible fixes:
   (a) use single quotes on the outside:

     <span onmouseover='alert("Hi");'>span element</span>

   (b) use single quotes on the inside:

     <span onmouseover="alert('Hi');">span element</span>
   
   In this context, we cannot use the \" ; we can only do that
   inside a <script></script> element.   


Question from a student: Can you give us a list of things we should
 definitely know for the written part, e.g. for loops, etc.

Answer:
  I can't promise to give an exhaustive complete list.  That is, I don't
  want to give a list, and then have you come back and say, "no fair",
  you asked about something that wasn't on the list!

  However, if it is understood that the list is not necessarily complete,
  I'm happy to give a top-of-the-head list of the things that occur to
  me immediately.

  Fair enough?

  The generic answer is: concentrate on the things that were in
    the four "new style labs", 8, 9, 10, 11.

    (a) for loops
          know how to make a simple table with a for loop and
          with document.write(), for example a table of conversion
          from fahrenheit to celsius, or feet to meters, or 
          cm to inches, etc.

         Know how to count up, count down, count by 2s, by 5s, etc.

    (b) Know how to get a value from the user in all of the following ways:

           window.prompt();
              remember to convert numeric values with parseInt or parseFloat

           form element  
              getting the value out with nameOfInputElement.value

              know what goes in front of that nameOfInputElement.value

              know that values come out in string format just like with
              window.prompt and if you need a number you have to convert

    (c) Know how to put an alert box on the screen
        Know how to write out a whole new web page with document.write();

           Basically, when you use document.write(); generally speaking
           you are _replacing_ what is on the page currently.  So it is best
           to write out an entire new web page.

        Know how to write some XHTML directly into an element
         using "dynamic HTML" 

        Quick review of Dynamic HTML:


           (1) give an element an id attribute foo  <p id="foo"></p>
           (2) do:
                 var myElem = window.document.getElementById("foo");

           (3) myElem.innerHTML="The new stuff that appears in the paragraph";

	    
         The names myElem and foo are arbitary choices.  It could be:




           (1) give an element an id attribute foo  <p id="alligator"></p>
           (2) do:
                 var purse = window.document.getElementById("alligator");

           (3) purse.innerHTML="The new stuff that appears in the paragraph";


	   But that would be silly.


     (d) Know how to make a form and ask the user for input.
         Know how to make a button with an event handler to do some
          calculation

         Know how to make an event handler "onload" and use it on the 
          <body> open tag, e.g.

        <body onload="makeMyWebPage();">