Midterm Review and Exam

Prerequisites: Lessons 1–14

This review guide is organized in three parts:

1. Exam Format and Arrangements
2. General Learning Objectives
3. Specific Topics

I. Exam Format and Arrangements

This will be a take-home exam, available in Oncourse Assignments Friday, Oct. 12, and due Monday, Oct. 15. You may use books and notes. You may use a computer and the Internet for reference and testing. You may not give or receive aid: your answers must be your own work. (You may ask the instructor for clarification of questions.)

You may return the exam through Oncourse (scan and upload attachment), FAX, or delivery of the paper to my office.

Question types include essay, short answer, sketching lines and curves, and writing short segments of JavaScript code. There are no multiple choice questions.

II. General Learning Objectives

By the time of the midterm, students should have acquired some knowledge about basic JavaScript programming, graphics concepts, and specific graphics know-how for the canvas.

A. Basic JavaScript Programming

1. Be able to describe the JavaScript language and compare it with another well-known language, such as Java.
2. Be able to use JavaScript to:
   1. Declare variables; distinguish between global and local variables.
   2. Use assignment and expressions.
   3. Define and call functions; make use of closures, anonymous functions, and functions as first-class objects.
   4. Use control statements for decisions and loops.
   5. Use arrays.
   6. Use simple objects (JSON level).
   7. Follow safer practices for robust scripts.
   8. Respond to user actions such as mouse clicks and keystrokes.

B. Graphics Concepts

Be able to

1. Explain color concepts including the RGB and HSL color models, alpha, and gradients.
2. Explain the concepts of images, patterns, and sprites.
3. Distinguish between stroke and fill.
4. Explain the concepts of lines, arcs, Bézier curves, open and closed paths.
5. Explain how animation works.
6. Explain the concept of a scene graph.

C. Canvas Know-How

Be able to

1. Create a canvas and access the 2D drawing context.
2. Draw lines, curves, text, and images on the canvas.
3. Create gradients and patterns; set fill and stroke styles with colors, gradients, and patterns.
4. Animate objects in a scene.

III. Specific Topics

Here follows a list of more specific learning outcomes and review questions, arranged chronologically by lesson.

1 Introduction

Learning Outcomes

Be able to

1. Explain the role of the HTML5 canvas and of SVG in web graphics.
2. Define the terms immediate mode, retained mode, scene graph.

Review Questions

1. Distinguish between an immediate mode and a retained mode graphics API.

2 JavaScript Fundamentals

Learning Outcomes

Be able to

1. Write the minimum required HTML tags for an HTML5 page with a script.
2. Write JavaScript comments.
3. Know when and how to declare variables.
4. Name and describe the three primitive types of JavaScript.
5. Write and evaluate JavaScript arithmetic expressions and boolean expressions.
6. Write and interpret control statements, including if, while, and for.
7. Explain the difference between === and ==, and between !== and !=.
8. Use console.log messages for debugging.

Review Questions

See “Optional Exercises” in JavaScript Fundamentals.

3 Introduction to the Canvas

Learning Outcomes

Be able to

1. Write the HTML canvas element.
2. Access the canvas and its 2D drawing context from JavaScript.
3. Distinguish between stroke and fill actions.
4. Explain the concept of a path, and distinguish between open and closed subpaths.
5. Write JavaScript to draw simple figures, including lines, rectangles, and arcs.

Review Questions

1. Distinguish between stroke and fill.
2. Write JavaScript statements to draw (and, if appropriate, fill):
   1. A line.
   2. An arc of 90 degrees.
   3. A hexagon (6 sides).

4 JavaScript Functions

Learning Outcomes

Be able to

1. Define JavaScript functions with parameters and return values.
2. Explain the concepts of closures, nested functions, anonymous functions, functional parameters, functional values, functions as first-class objects, and why they are use

Review Questions

1. What is a closure, and why is it useful?
2. What is an anonymous function, and why is it useful?

5 Simple Canvas Animations

Learning Outcomes

Be able to

1. Explain how animation works.
2. Explain the concept of a callback function.
3. Set up a timeout or an interval timer.

Review Questions

1. Explain how animation works.
2. Assume that an animate function has been defined, with no parameters. Write a JavaScript statement that creates an interval timer, calling the animate function every 1/50 second, and stores the interval timer ID in a variable.

6 Colors and Gradients

Learning Outcomes

Be able to

1. Find and use a list of the color keywords that may be used as fill and stroke style values.
2. Explain the RGB and HSL color models.
3. Estimate the HSL parameters for a particular hue (described in words, such as “yellow-green”), saturation, and lightness, or for a color that you are shown; or, conversely, explain the HSL numbers of a color in plain English that a typical small business owner could understand.
4. Explain the alpha parameter is in the RGBA and HSLA color models.
5. Describe some effects that can be produced using gradients, or some objects or phenomena that are suitably rendered with gradients.
6. Explain the concepts of linear gradient and radial gradient.
7. Write code to set the fill or stroke style to a particular color or gradient.

Review Questions

1. How would you describe the color hsl(30, 100%, 12%) in plain English?
2. Explain the fourth parameter in rgba(0, 0, 0, 0.25).
3. Write code to draw a rectangle, filling it with a linear gradient that flows from red on the left to yellow on the right.

7 JavaScript Objects

Learning Outcomes

Be able to

1. Explain what an object is in JavaScript.
2. Explain how JavaScript objects are different from Java objects.
3. Create an object using object literal notation.
4. Access and set properties of an object, using dot notation, and using bracket notation.
5. Write a for loop that iterates through all the properties of an object.
6. Putting a function into an object, making a method.
7. Define a function to make an object.
8. Use a certain built-in object to get the number π, random numbers, and trigonometric functions such as sine and cosine.

Review Questions

1. Write a statement that makes the variable mydog refer to a new object with the properties name = “Mutt”, age = 6, hungry = true, using object literal notation.
2. Write a statement that changes the name property of mydog to “Sam”.
3. Write a statement that writes the name property of mydog to the console log.
4. Write a statement that writes a random real number between 0 and 12 to the console log.

8 JavaScript Arrays

Learning Outcomes

Be able to

1. Create an array with an array literal expression.
2. Create an array with 50 undefined elements.
3. Given an array, access and set the values of its elements.
4. Determine the length (number of elements in) an array.
5. Write a loop to iterate through an array.
6. Compare JavaScript arrays with Java arrays (i.e., tell how they are similar and how they are different).

Review Questions

1. Write a JavaScript statement to create an array with the elements “bat”, “cat”, and “rat”, and store it in the variable varmints.
2. Write a loop that prints every element of the array gems on the console log.
3. Increase the value of the 5th element of nums (an array of numbers) by 25.
4. Compare JavaScript arrays with Java arrays.

9 Controls and Events

Learning Outcomes

Be able to

1. Explain the concepts of events (such as keyboard and mouse events) and callbacks.
2. Create HTML form elements such as button inputs.
3. Define and set up callback functions for handling mouse events and keyboard events for the canvas or for control elements such as button inputs.
4. Distinguish between screen coordinates and client coordinates of a mouse event.
5. Name and describe the three events that are produced when a mouse button is clicked, and similarly the three events when a character is typed on the keyboard.

Review Questions

1. Name and describe the three events that are produced when a mouse button is clicked.

10 Images and Patterns

Learning Outcomes

Be able to

1. Explain why, when an Image object is created, we set a callback for its load event instead of immediately executing instructions to deal with the image.
2. Write statements to draw an image on the canvas (a) simply; (b) scaled; (c) partially.
3. Explain the concept of a pattern used as “paint” for the stroke or fill.
4. Write statements to create a pattern and set it as the stroke or fill style.
5. Explain the concepts and uses of sprites and pixel buffers.

Review Questions

1. Assume that the variable im refers to an Image object which is known to be loaded. Write a statement to draw the image on the canvas at the point (50, 100).
2. Explain the concept of a pattern used as “paint” for the stroke or fill.

11 Strings

Learning Outcomes

Be able to

1. Write a string literal in JavaScript.
2. Explain, interpret, and use the JavaScript string methods split, charAt, and slice.

Review Questions

1. What does this do? "ace,ten,jack".split(",")
2. Write a string slice expression that extracts the characters “tap” from the string “catapult”.

12 Drawing Text

Learning Outcomes

Be able to

1. Write a JavaScript statement that draws some text (i.e., a string) at a given point.
2. Explain why, when drawing text at a small font size, you should normally fill and not stroke.
3. Explain the differences between the text alignment values “left”, “right”, and “center”, and between the text baseline values “top”, “middle”, “bottom”.
4. Write statements that find the width of text at the current font setting.

Review Questions

1. Write a JavaScript statement that draws the text “Oily” on the canvas starting at the point (400, 300).
2. If “Oily” is drawn starting at (400, 300), with text alignment “left” and baseline “bottom”, and its width at the current font setting is 40 pixels, then what is the x coordinate at the end of the drawing?

13 Robust JavaScript

Learning Outcomes

Be able to

1. Work around or avoid misfeatures of the JavaScript language to make scripts more robust, including the lack of a module system, implicit type conversions; and the usage of “use strict” and JSLint.
2. Use the try/catch statement to handle exceptions.

Review Questions

1. Explain how to protect your script from unfortunate interactions with other scripts (used on the same web page) in the absence of a proper module system.
2. What is JSLint?

14 More about Lines and Curves

Learning Outcomes

Be able to

1. Set the line width, caps, and joins properties.
2. Draw quadratic and cubic Bézier curves.

Review Questions

1. Write the JavaScript statement to set the line width to 8.
2. Write JavaScript statements to draw a quadratic curve from (0, 100), “through” (which really means “influenced by” (50, 200), ending at (100, 100).