Skip to content

Exam 2

The learning objectives are statements of what you should be able to do at this point in the course. If you are unsure about any of these topics, use the course resources to review and practice further.

Note

This course is inherently cumulative; each week builds on the prior weeks. Many objectives from Exam 1 remain relevant for Exam 2, especially those involving JavaScript and DOM manipulation. However, Exam 2 will focus primarily on the new objectives listed below.

Learning Objectives

Client-Server Model

  • Identify the main components of a URL (scheme, domain, path, query, fragment) and explain the purpose of each
  • Determine an absolute or relative path given the location of a file in the file system and the root directory of the web server
  • Summarize the steps involved in requesting and displaying a web page (including issuing DNS queries, parsing HTML and CSS files, retrieving images, and rendering the page)

Grid and Flex Layout

  • Distinguish standard CSS value units: vw, vh, fr
  • Define CSS rules using position properties: position, top, left, z-index
  • Distinguish static, absolute, fixed, and relative position in CSS
  • Given an image of a layout, identify the properties or values required to produce that layout
  • Define and use custom CSS rules to construct a grid or flexbox layout:
    • grid-template-columns, grid-row, grid-column
    • align-items, justify-content, flex-direction
  • Identify and use the correct values for the separate dimensions of the flexbox layout
    • align-items: flex-start, flex-end, center, stretch
    • justify-content: flex-start, flex-end, center, space-between, space-start

Asynchronous Programming

  • Pass a callback function as an argument to another function using either a function name, anonymous function, or arrow function
    • Example: doSomething(x => x.length);
    • Example: doSomething(theThingToDo);
  • Create and predict the behavior of a function that returns a closure
    • Example: function foo(x) { return function(y) { return x + y; }; }
    • Example: function foo(x) { return y => x + y; }
  • Use .forEach(), .map() , and .filter() on array values
    • Example: list.forEach(it => console.log(it));
    • Example: list.filter(it => it % 2 == 0).map(it => console.log(it + ' is even'));
  • Use fetch to retrieve data from a JSON file for processing
    • Example: fetch(data).then(resp => resp.json()).then(x => console.log(x));
  • Create and use functions declared as asynchronous
    • Example: async function foo() { ... }
  • Use await to rewrite a complex statement of multiple fetch and then calls
  • Create and use functions that return a Promise
    • Example: function foo() { return new Promise(resolve => resolve(...); }

Validation and Persistence

  • Validate user input in form elements using HTML attributes and regular expressions.
    • Example: required, minlength and maxlength, pattern
    • Example: ab?c, ab*c, abc|xyz
  • Store and retrieve JavaScript text values with localStorage and sessionStorage
    • Example: localStorage.setItem('username', 'alice');
    • Example: let name = localStorage.getItem('username');
  • Implement a class in JavaScript (using modern class syntax) based on a UML class diagram.
    • The class will have two or more attributes, a constructor, and static/instance methods.