CPSC 120, Fall 2011
About the Third Test

The second test in CS 120 will be given in class on Wednesday, November 14. It will concentrate on material that we have covered since the second test. However, you are still responsible for older material, including parts of HTML, CSS, and JavaScript that we covered earlier in the semester. In particular, note that you can't really do anything in JavaScript without understanding literals, variables, functions, if statements, and while statements. You also need to know how they relate to CSS and HTML.

The main topics for the test include the HTML canvas element and the graphics contexts that you use for drawing on a canvas; events and functions that handle events; arrays; and JQuery and JQuery animations. Some things that you have encountered that will not be on the test are GIMP, for loops, and object literals. There could be questions that use <select> elements, checkboxes, and onchange events, but only in questions that ask you to interpret HTML and JavaScript, not in questions that ask you to write new code. You do not need to know how to get x and y coordinates from a mouse event object. There will be no questions that use the JQuery animation function $(...).animate(). See the course web page, http://math.hws.edu/eck/cs120 for relavant pages from the textbook. You should also review Labs 9, 10, and 11 — and make sure that you understand them.

The format will be similar to the first two tests: You should expect several types of questions, with long and short essay-type questions about definitions and concepts, questions that ask you to write code, and questions that ask you to interpret code that you are given.

Here are some terms and ideas that you should be familiar with:

programming style and why it is important
comments in programs and why they are used
what it means to "format" a program

HTML <canvas> element
using a graphics context to draw on a canvas
filling and stroking shapes

important values in a graphics context:
   graphics.fillStyle
   graphics.strokeStyle
   graphics.lineWidth

important functions in a graphics context:
   graphics.fillRect(x,y,width,height)
   graphics.strokeRect(x,y,width,height)
   graphics.clearRect(x,y,width,height)
   
other important functions that you have used to work with graphics contexts:
   strokeLine(graphics,x1,y1,x2,y2)
   fillCircle(graphics,x,y,radius)
   strokeCircle(graphics,x,y,radius)
   
events and event handler functions
mouse events: onclick and onmousemove
onchange events for elements such as <input< and <select>
passing an event object as a parameter, for example:  
                       <canvas onmousemove="moveOnCanvas(event)"...
events are asynchronous
event handler functions are set up to be called later, when the event occurs

structured data values
array -- list of values, referred to by their positions in the list
index of a position in an array
array literals, for example:  [ "fred", 17, 3.14159 ]
referring to an array value using [ and ], for example:  A[17]
using a variable or expression as an array index, for example: 
                                    A[i]  and   pics[currentPicNumber]
object -- collection of values, referred to by name
referring to one of the values in an object, for example:  graphics.lineWidth

JavaScript libraries
JQuery
using the $ function with CSS selectors, for example:  $("#foo") and $("p.clickable")
using JQuery to set CSS values, for example:  $("#foo").css("color","red")
using the special variable this in an event-handler function
using JQuery to attach events to elements, for example:  
       $("p").click(doClickOnP)
       $("#cnvs").mouseover(touchCanvas)

important JQuery animations, slideDown, slideUp, fadeIn, and fadeOut, for example:
    $("#pic").fadeIn()
    $("#intro").slideDown(1000)
    $("#coin").fadeOut(500,newCoin)

Here are a few sample problems:

1. Describe the picture produced by the following function, or draw an example, if graphics is a graphics context for drawing on a canvas: 

       function draw() {
          graphics.clearRect(0,0,600,600);  
          graphics.strokeStyle = "red";  
          for ( n = 1; n <= 10; n++) {
            x = 100 + Math.floor(400*Math.random());  
            strokeLine(graphics, 300, 100, x, 500);  
          }  
       }

2. Write a draw() function that uses canvas graphics to draw a picture that contains: A 200-by-200 filled red square. A 5-pixel wide blue outline around the square. A filled green circle contained inside the square, with the same center as the square.

3. In the following JavaScript, the drawFrame function is called repeatedly to produce an animation. Describe the animation.

        var a = 10;
        
        function drawFrame() {
           graphics.fillStyle="blue";
           graphics.fillRect(0,0,600,600);
           graphics.fillStyle="white";
           graphics.fillRect(10,10,a,a);
           a = a + 10;
           if (a > 590) {
              a = 10;
           }
        }

4. Write a script, using JQuery, that will set the color of any <h1> element to be a random color whenever a mouseover event occurs on the element. Assume that there is a function randomColor() that gives a random CSS color value. Do not use an animation

5. Write a script, using a JQuery animation, that will make the element with id="foo" fade away and disappear when it is clicked.

6. What value is stored in A[3] in the following JavaScript code segment?

          var A = new Array[4];
          A[0] = 5;
          var i = 0;
          while (true) {
             var x = A[i];
             i = i + 1;
             A[i] = 2*x;
             if (i == 3) {
                break;
             }
          }

7. Write a draw() function that uses canvas graphics to draw the picture shown at right in a 600-by-600 canvas. You should first fill the entire canvas with white. Then draw 10 circles, as shown. Use a loop (a for loop or other counting loop)! The distance between the circles is 30 pixels, and the center for each of the circles is (300,300).