CPSC 120, Fall 2014
About the Second Test

The second test in CS 120 will be given in class on Wednesday, October 22. The test will concentrate on material that has been covered since the first test. You are still responsible for older material, to the extent that the newer material builds on it. For example, you still need to know how to use buttons and how to change style, innerHTML, and image src in JavaScript.

The reading for the test includes the following sections of JavaScript &JQuery: Chapters 1 and 2, especially pages 44–69 and 74–84; Chapter 3, pages 86–99 only; and Chapter 4, especially pages 146–163 and 170–176. In addition to the material from the book, we have spent a great deal of time on programming graphics using the HTML <canvas> element. The book does not cover graphics, but it was covered in class and in Labs 5, 6, and 7. You should review the labs. We also covered the setTimeout function and how it is used in animation. And we covered the HTML <input> element for text input.

The format of the test will be similar to the first test. You can expect some essay questions about definitions and concepts. You will be asked to write some JavaScript code. You might be given some code and asked what it does. Some of the programming questions will use graphics: For example, you might be given a picture and asked to write a function that will draw it, or you might be given a function sked to draw or describe the picture that the function would draw. You might be asked what a given animation will do when it is run. There will be no questions about Komodo Edit or Linux.

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

program
programming language
JavaScript
using JavaScript in a <script> element
using JavaScript from a file:  <script src="fileURL.js"></script>
JavaScript syntax rules are strictly enforced

JavaScript is executed as the page is loaded  (but a function definition 
            only defines the function, it doesn't execute the code)

variables
declaring variables, for example:   var x;
global variables and local variables
global variables remember their values as long as the page is in the browser
local variables are only valid in the function in which they are declared
basic value types:  Number, String, Boolean
data structures (arrays and objects, but so far you only know that they exist)
assignments statements:  variable = value;
control structures:  branches and loops
branches allow the computer to decide what to do next
loops allow the computer to repeat the same block of code many times

programming style:
   use meaningful names
   use indentation to show the structure of the program
   use comments, for example:    // this comment extends to the end of the line
why programming style is important
   
the HTML <canvas> element
coordinates on a canvas
using a graphics context for drawing on a canvas
basic graphics context variables and functions (see list below)

for loops, for example:
     for (i = 1; i <100; i = i + 1) { 
         ... 
     }
     for (x = 50; x < 800; x = x + 50) { 
         ... 
     }
     
using for loops to draw regular patterns
     
simple if statements, for example:
     if ( frameNumber < 200 ) {
         ...
     }
     
if statement with else, for example:
     if ( x > 0 ) {
         ...
     }
     else {
         ...
     }
     
setTimeout( functionName, milliseconds );
using setTimeout to implement animation
computer animation
frames in an animation
using frameNumber % loopLength to implement looping animations

operators:
    for arithmetic:   +  -  *  /  %
    for strings:   +
    for comparing values:   ==  !=  <  >  <=  >=
    for combining boolean values:   ||  &&  
    
the function Math.random();
using Math.random in an if statement, for example,
    if ( Math.random() < 0.5 ) {
        alert("Heads!");
    }
    else {
        alert("Tails!");
    }
    
some of my non-standard random functions:
    randomInt( N, M )
    randomColor()
    
HTML <input> element, for making input boxes
using document.getElementById("inputboxid").value to get the contents of an input box

defining functions
calling functions
defining functions that have parameters
calling functions that have parameters

Here are the graphics variables and functions that you should be able to use:

graphics.lineWidth
graphics.fillStyle  --  for named color values like "black", "blue", "lightgray"
graphics.strokeStye  --  for named color values
graphics.globalAlpha  --  ranges from 0.0 for invisible through 1.0 for fully opaque

graphics.strokeLine(x1,y1.x2,y2);
graphics.strokeRect(x,y,width,height);
graphics.strokeCircle(x,y,radius);

graphics.fillRect(x,y,width,height);
graphics.fillCircle(x,y,radius);