Download CS142 Midterm Exam - Winter 2022 and more Summaries Web Application Development in PDF only on Docsity!
CS 142 Midterm Examination
Winter Quarter 2022
You have 1.5 hours (90 minutes) for this examination; the number of points for each
question indicates roughly how many minutes you should spend on that question. Make
sure you print your name and sign the Honor Code below. During the examination you
may consult two double-sided pages of notes; all other sources of information, including
laptops, cell phones, etc. are prohibited.
I acknowledge and accept the Stanford University Honor Code. I have neither given nor received aid in answering the questions on this examination.
(Signature)
(Print your name, legibly!) [email protected] (Stanford email account for grading database key)
The HTML language standards group has added tags like , , , and that could have easily been implemented in older HTML using a div tag with a class attribute specifying the formatting that should be done for that type of document section. Explain how adding these new tags to HTML makes sense (i.e. consistent with both the philosophy and practical usage of HTML) even though the formatting they direct can be done relatively easily with existing div tags.
Some CSS properties are inherited (e.g. font-size) and some properties are not inherited (e.g. border). For the inherited properties, does a DOM Node inherit from the parentNode or offsetParent? Explain your answer.
Assume you are given a deeply nested HTML document with no CSS styling and a global JavaScript variable named element that points to a DOM leaf node somewhere in the middle of the document many tree levels down from the root node. Show JavaScript code that changes element.offsetParent without explicitly assigning to element.offsetParent.
When building traditional web pages (i.e. static HTML documents), the use of element styling (style=attributes) is discouraged in favor of using CSS style sheets for styling. When programming in React.js with JSX, element styling (style=attributes) is not discouraged. Explain the problem with using “style=attributes” in static HTML documents that is not present in JSX usage.
Below we list pairs containing an HTML hyperlink and a URL that resulted from a click on the hyperlink (i.e. resultant URL). (a) Click http://localhost:999/a/b/c.html (b) Click http://localhost:999/a/b/c.html (c) Click http://localhost:999/z/a/b/c.html (d) Click http://localhost:999/a/b/c.html#foo None of the URLs in the hyperlinks are full URLs meaning the browser's current location URL of the page containing the hyperlink is used in determining the resultant URL. For each of the pairs (a)–(d), describe what the browser's current location URL must have been to have the given resultant URL. Note many possible current locations could cause the listed resultant URL. Your answer should describe the possible values for all the parts of the current URL (i.e. scheme, hostname, port number, hierarchical portion, query parameters, fragment). (a) (b) (c) (d)
When looking at a DOM node other than the root of the tree, there are two pointers that point at nodes further up the tree towards the root (parentNode and offsetParent), following either of these pointers up the tree will eventually get to the body tag node. Considering these two paths up the tree, answer the following questions: (a) Are the nodes in the parentNode path always in the offsetParent path? Explain your answer. (b) Are the nodes in the offsetParent path always in the parentNode path? Explain your answer.
Consider the following HTML document:
One
Two
Three
Four
We run the following JavaScript on the document: const divs = window.document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { divs[i].addEventListener("click", (e) => console.log('bubble', e.currentTarget.id, e.currentTarget == e.target, e.currentTarget.textContent.replace(/[\s]/g, '')), false); divs[i].addEventListener("click", (e) => console.log('capture', e.currentTarget.id, e.currentTarget == e.target, e.currentTarget.textContent.replace(/[\s]/g, '')), true); } Hint: the third parameter in addEventListener is named useCapture. problem continued on next page…
AngularJS showed the usefulness of binding JavaScript values in controllers to expressions in an HTML template. A programmer could simply change the value of a JavaScript variable and AngularJS would detect and re-render the component with the updated template expressions. Although this binding was a hit with programmers, it required AngularJS to compare all the expressions in the templates to see if some state had changed every time some JavaScript code ran. For views with much state, this checking for changed JavaScript state variables got too expensive to be useful. Explain the mechanism ReactJS used to be able to employ a similar binding of JavaScript variables to HTML template expressions yet didn't suffer large overheads when only small amounts of the state changed.
Explain how a ReactJS web application can appear to behave like an old-style web application (where the user clicked on hyperlinks to navigate between view "pages" and uses HTML forms to input data), yet be considered a single page application.
Internationalization (I18N) and Accessibility (ARIA) are two important properties of a web application that frequently don't make it into the first release of a web application. When adding features to a web application, the work can be considered independent if the changes required don't interact with each other and features can be added by teams working concurrently. State whether Internationalization (I18N) and Accessibility (ARIA) are dependent or independent from each other, and explain.
