Download ECS 162 Web Programming Midterm 1 – Spring 2018 and more Summaries Web Application Development in PDF only on Docsity!
ECS 162
Web Programming
Midterm 1 – Spring 2018
This test consists of multiple choice and programming questions.
Please answer the multiple choice questions on the Scantron. Choose the best answer, even if none of them seem perfect or more than one of them seems correct. There is no penalty for wrong answers, so feel free to guess.
On the programming questions, comment your code so that we can to give you partial credit. Please write as clearly as you can; we scan these in before grading, and big erasures or faint writing comes out poorly.
Answer the programming questions using HTML, CSS, flexbox and Javascript wherever you know how to do that (avoid JQuery, other layout frameworks, etc). Comment Javascript features that we have not gone over in class, so we don’t confuse them with mistakes. Avoid using the innerHTML property; change the DOM by adding, removing or modifying its nodes, and change text using the textContent property.
The first group of questions concern the HTML file on Page 5, which is intended to produce the output shown inside the box below.
- (5 points) There is an error in the HTML file. Is it... a) A missing close-image tag b) Two elements with id storyPhoto c) Two elements of different types with class story d) All of the above e) a and b, but not c
- (5 points) We begin our CSS file by adding only the lines: body { height : 100 vh ; display : flex ; flex - direction : column ; }
main { }
To get the main element to take up the full height of the window, minus exactly whatever is needed for the header and footer, we could add the line.... a) in main, flex: 1 0 auto; b) in body, flex: 0 1 0; c) in body, justify-content: flex-start; d) in main, justify-content: flex-start; e) in main, height: 75%;
- (5 points) Here is some code that creates an object using class and new.
class Counter { constructor () { var count = 0; this. report = function () { return count ; } } // end constructor function } allowed = new Counter ; allowed. count = allowed. count +1; var x = allowed. report ();
What will x contain? a) The number 0. b) The number 1. c) undefined. d) The program will crash on allowed.count = allowed.count+1;. e) The program will crash on var x = allowed.report().
- (5 points) The same origin policy....
a) ...is implemented by most servers. b) ...is implemented by most browsers. c) ...requires the cooperation of both servers and browsers.
- (5 points) Here are a few lines, with one of them blank.
var event = {}; event. name = " Whole Earth Festival " ; event. Month = " May " ;
console. log ( event. Month + " , " + event. day );
When run, this code prints May, 11 in the console. Which of the following could fill in the blank? a) this.day = "11"; b) event.day = "11"; c) event.day = 11; d) Either b or c or would work. e) Either a or b would work.
HTML listing for Questions 1-
< html >
< head > < meta charset = " UTF -8 " > < meta name = " viewport " content = " width = device - width " > < title > UC Davis Sports Story < link rel = " stylesheet " type = " text / css " href = " reset. css " > < link rel = " stylesheet " type = " text / css " href = " sports. css " >
< body >
< header > < h2 > Catch UC Davis Softball on ESPN3
< main >
< div class = " storyCollection " >
< div class = " story " >
< div class = " imgDiv " id = " storyPhoto " > < img src = " softball. jpg " alt = " Davis softball player " class = " photo " id = " storyPhoto " >
The Big West Conference announced that the A g g i e s doubleheader against preseason favorite Cal State Fullerton on April 28 will be two of seven games broadcast on ESPN3 , the league announced. It will be the p r o g r a m s first appearance since 2016 also against the Titans and their third time overall after also making an appearance in 2014 ( also at Cal State Fullerton ).
< footer > Follow UC Davis sports!
// Global variable - will contain callback function var processLinks = null ;
// Given the object produced from the API data , return the title of a random link function randomLink ( APIObject ) { function randInt ( n ) { return Math. floor ( Math. random () * n ) };
...
}
// Given a Wikipedia page title , display it on our Web page function displayHop ( title ) { var hopsDiv = document. getElementById ( " hopsDisplay " );
...
}
// onclick function for Submit button. // Assign something to the callback function variable " processLinks " // from inside here. function doWikiHops () { var title = document. getElementById ( " WikiPageTitle " ). value ; var hops = document. getElementById ( " numberOfHops " ). value ;
...
}
// Remove all children from a DOM element function removeChildren ( element ) { var last ; while ( last = element. lastChild ) element. removeChild ( last ); }
// Issue a JSONp request function getLinks ( title ) { oldScript = document. getElementById ( " jsonpCall " ); if ( oldScript != null ) { document. body. removeChild ( oldScript ); } query = " http :// en. wikipedia. org / w / api. php? " query += " action = query & format = json & prop = links & titles = " query += title + " & callback = processLinks " ; var script = document. createElement ( ’ script ’); script. src = query ; script. id = " jsonpCall " ; document. body. appendChild ( script ); }
- (12 points, MULTIPLE CHOICE, answer on Scantron)
The function displayHop writes the title of a Wikipedia page onto the Web page of our app by changing the DOM. The first line gets the parent div which will contain the new title. // Given a Wikipedia page title , display it on our Web page function displayHop ( title ) { var hopsDiv = document. getElementById ( " hopsDisplay " );
...
}
The contents of the function could be: a) var newP = document. createElement ( " p " ); newP. textContent = title ; hopsDiv. appendChild ( newP );
b) var newP = document. createElement ( " p " ); newP. appendChild = document. textContent ( title ); hopsDiv. appendChild ( newP );
c) if ( hopsDiv != null ) { document. body. removeChild ( hopsDiv ); } var newTitle = document. createElement ( ’ div ’); newTitle. textContent = title ; document. body. appendChild ( newTitle );
d) if ( hopsDiv != null ) { hopsDiv. appendChild ( document. textContent ( title ) ); } else { hopsDiv = document. createElement ( ’ div ’); hopsDiv. id = " hopsDisplay " ; hopsDiv. appendChild ( document. textContent ( title ) ); }
- (26 points) The onclick function of the “Submit” button on our app is called doWikiHops. Below is the beginning of this function, getting the values that the user entered from the Web page. Finish the app by writing the rest of this function. Hints:
- You may use removeChildren, getLinks, randomLink and displayHop, as well as the global variable processLinks.
- You need to define and write the callback function, and it will be convenient to do that inside of doWikiHops.
- At every hop, you need to get the links for the current page from the API.
- You need to keep track of the number of hops. // onclick function for Submit button. // Assign something to the callback function variable " processLinks " // from inside here. function doWikiHops () { title = document. getElementById ( " WikipediaPageTitle " ). value ; hops = document. getElementById ( " numberOfHops " ). value ;
