Computer Tech Finals Guide 2018

In CSS, how would you select this image by its id? <img id="mainpic" src="cat.png">

#mainpic { }

In CSS, how would you select only the paragraphs with class name "warning"? <p class="warning">Don't do it.</p> <p>Do it.</p> <p class="warning">Nooo, don't do it.</p>

.warning { }

Let's say you wrote a program that animated a Superman flying across the screen. Which would be the best comment to put at the top?

/* This program animates Superman flying across the screen. The speed is controlled by variables at the top. Written in 2015 by @Batman. *//

In your Superman-animating program, there's a line that controls his speed. Which comment is the most clear?

// Increases x position by the value of speed, capping at 100 var supermanX = min(supermanX + speed, 100);

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println(10), it will output: 10 Consider the following code: var i = 0; while (i < 3) { println(i); i++; } What does the code output?

0, 1, 2

In the following code, we define two variables, xPos and yPos, and use them to draw a rectangle: var xPos = 10; var yPos = 5; rect(xPos, yPos, 10, 10); At what x position is the rectangle drawn?

10

In the following code, we define two variables, w and h, and use them to draw an ellipse and a rectangle: var w = 20; var h = 15; rect(10, 10, w, h); ellipse(10, 10, w, h); How tall is each one of the shapes?

15

Imagine the following program that draws two rectangles, where the variables width1 and width2 keep track of the widths of the two rectangles, and width2 is dependent on width1: var width1 = 12; var width2 = 2 * width1 + 5; rect(50, 50, width1, 10); rect(50, 80, width2, 10); If we change the initial value of width1 to 666, what will be the numeric value of the expression stored in width2?

17

In the following code, we define a variable and use it to draw a rectangle: var rectWidth = 20; rect(10, 10, rectWidth, rectWidth); How wide is the rectangle?

20

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println(10), it will output: 10 Consider the following code: var i = 3; while (i < 6) { println(i); i += 1; } What does the code output?

3, 4, 5

In this program, the value of b is dependent upon the value of a and the value of c is dependent upon the value of b. The println() statement prints the result of the expression that is passed to it: var a = 25; var b = a / 5; var c = b + 30; println(b + c); What will the above program print?

40

After running this code: var x = 5; What is the value of x?

5

In the following code, we define a variable and draw three shapes - a rectangle and two ellipses: var xPos = 55; rect(10, 20, 30, 40); ellipse(xPos, 20, 15, 30); ellipse(xPos, 10, 20, 30); At what x position are the ellipses drawn?

55

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println(10), it will output: 10 Consider the following code: var x = 3; var i = 0; while (i < 3) { x += 1; i += 1; } println(x); What does the code output?

6

The DOM is the set of functionality that browsers provide to enable developers to access and manipulate webpages. What does DOM stand for?

Document Object Model

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println("Hi"), it will output: Hi Consider the following code: var i = 0; while (i < 0) { println("hi"); } What does the code output?

It won't output anything!

The following program draws two boxes, a big one and a small one. The variables big and small keep track of the sizes of the two boxes: var big = 100; var small = 10; rect(100, 100, big, big); rect(100, 100, small, small); We want to make small dependent upon big, so that they keep the same proportion when we change them - small should always be 1/10 the size of big. What expression should small store?

big / 10

Let's say we have a program that draws a simple face and body with ellipses. It uses two variables, one for body size and one for face size: var bodySize = 100; var faceSize = 50; ellipse(200, 200, bodySize, bodySize); ellipse(200, 150, faceSize, faceSize); If we want to make faceSize dependent on bodySize, so that faceSize is always one-half bodySize, what expression should the faceSize variable store instead?

bodySize / 2

When you're writing JS on a webpage, what is the name of the global variable that represents the DOM?

document

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

ellipse(x, y, 15, 5);

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

for (var i = 0; i < 10; i++) { println(i); }

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println("Hi"), it will output: Hi Consider the following code: var i = 0; while (i < 3) { println("hi"); i++; } What does the code output?

hi, hi, hi

Note: the println() function prints out a line of text with the value that you pass to it - so if you say println("Hi"), it will output: Hi Consider the following code: var i = 0; while (i < 3) { println("hi"); i++; } println("bye"); What does the code output?

hi, hi, hi, bye

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

if (x > 2) { println(x); }

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

if (x > 5 && y < 10) { rect(x, y, 10, 10); }

What sort of data type does the document variable store?

object

In CSS, how would you select all the <p> tags on a page?

p { }

Let's say we have a program that draws an ice cream cone (a triangle) with two scoops of ice cream (two ellipses) on top of it. The second scoop is slightly smaller than the first, and we have two variables, scoop1 and scoop2, to keep track of the scoop sizes: var scoop1 = 40; var scoop2 = 30; triangle(200, 250, 180, 200, 220, 200); ellipse(200, 180, scoop1, scoop1); ellipse(200, 145, scoop2, scoop2); If we want to make scoop2 dependent on scoop1, so that scoop2 is always 10 pixels smaller than scoop1, what expression should we store in the scoop2 variable?

scoop1 - 10

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

var addUp = function(a, b) { var c = a + b; return c; };

Which of these code snippets is the most readable and adheres to JavaScript naming conventions?

var sunSize = 10; var sunX = 200; var sunY = 300; ellipse(sunX, sunY, sunSize, sunSize);

Which of these code snippets is the most readable, according to the JavaScript coding style conventions that we recommend here?

var x = 5 * i;

This program draws a rectangle based on the variables w (for width) and h (for height): var w = 10; var h = 50; rect(200, 200, w, h); Let's say we want to make h dependent on w, so that if we ever change the value of w, the value of h will change proportionately, so that h is always 5 times as large as w. What expression should h hold?

w * 5