JAVA, HTML, CSS: Week 4
Which is the appropriate event handler to do something once a file has loaded?
onchange
Which of the following are examples of nesting? Select all that are correct.
A list of lists A for loop inside a for loop
Consider the examples you have seen of web pages that enable users to upload images and add filters to them. Which of the following describes what happens when the user clicks a button to add a filter to an image?
The onclick event handler calls a function that applies the filter to the image, then the filtered image is drawn on the canvas.
What is the purpose of adding CSS to a web page?
To style the web page
Imagine you want to write a program to turn an image into a mirror image of itself. Which of the following would be the best approach to take?
Work small examples by hand, write down what you did, look for patterns, translate your algorithm to code, test and debug your program.
consider the following JavaScript: var grayimage = null; var image; function loadImage(){ var ff = document.getElementById("fbutton"); gcanvas = document.getElementById("can"); doclear(); image = new SimpleImage(ff); image.drawTo(can); } function makeGray(theImage) { for (var pix of theImage.pixels()){ var total = pix.getGreen() + pix.getRed() + pix.getBlue(); var avg = total/3; pix.setGreen(avg); pix.setBlue(avg); pix.setRed(avg); } return theImage; } Which of the variables are global variables? Select all that are correct.
grayimage image
Consider the following code that calls the function filterGreen (code for this function not shown) to apply a green filter to the image greenImage. function doGreen() { if (imageIsLoaded(greenImage)) { filterGreen(); } } What line needs to be added to this code to display the final image on the canvas? You can assume that there is a variable named canvas that can be used to reference the canvas.
greenImage.drawTo(canvas);
Consider the following HTML and CSS to make a web page. HTML: <head> </head> <title>Cities</title> <body> <p><img src="http://s12.postimg.org/yj9byjs3x/DSCN6056_copy.jpg"/> </p> <p> <ol> <li class = oddNums>New York</li> <ul> <li>Empire State Building</li> <li>Statue of Liberty</li> <li>Times Square</li> </ul> <li>Los Angeles</li> <li class = oddNums>Chicago</li> </ol> </p> </body> CSS: body { background-color : #567898; } oddNums { color : purple; } Which of the following are errors in this code? Select all that are correct.
The HTML is missing <html> tags. In the CSS there should be a dot before oddNums to indicate that it is a class. The <title> tag should be inside the <head> tag. The unordered list inside the ordered list should go inside the list element New York, not after it.
Consider the following short program that defines a function to make an image darker by a certain amount and applies it to the image chapel.png. function makeDarker(image,amount){ for (var px of image.values()){ px.setRed(px.getRed()-amount); px.setGreen(px.getGreen()-amount); px.setBlue(px.getBlue()-amount); } } img = new SimpleImage("chapel.png"); img = makeDarker(50); print(img);
The call to makeDarker does not pass an image as an argument. The line that initializes the variable img is missing the keyword var. The function makeDarker is missing a return statement so there will be an error when the program assigns the return value of makeDarker to the variable img.
Consider the following image in which the upper left quadrant is cyan, the upper right quadrant is green, the lower left quadrant is blue, and the lower right quadrant is black: Now consider the code that attempts to create that image but has a mistake, and instead produces this image, in which the upper left quadrant is blue instead of cyan: var img = new SimpleImage(200,200); for (var px of img.values()){ var x = px.getX(); var y = px.getY(); if (x < img.getWidth()/2){ px.setBlue(255); } else { if (y < img.getHeight()/2){ px.setGreen(255); } } } print (img);
The code inside the else statement is only applied to pixels that did not satisfy the first if statement. So only pixels in the upper half of the image that are not also in the left half of the image are made green by the if statement inside the else statement. not The if statement inside the else statement checks if pixels are in the upper half and the right half of the image, so only the upper right quadrant of the image is made green.