This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Exams

In-class (in-person) proctored assessments.

All exams in this class will be taken in-person, on paper.

1 - Exam 01: Preparation

This exam will be on paper, and must be taken in-person.

Learning Objectives

HTML and Web Fundamentals

  • Identify the main components of a URL (scheme, domain, path, query, fragment) and explain the purpose of each
  • 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)
  • Distinguish between an absolute path, a relative path, and a URL, as well as how they are used in HTML
  • Determine an absolute or relative path given the location of a file in the file system and the root directory of the web server
  • Identify the HTML elements that are required for validation
  • Classify standard HTML elements as block or inline (default display)
  • Write syntactically valid HTML code for standard, empty, and nested elements:
    • Block-based elements: <p>, <ul>, <ol>, <li>, <div>, <h1>…<h6>
    • Table elements: <table>, <thead>, <tbody>, <th>, <td>, <tr>
    • Inline elements: <span>, <em>, <strong>, <a>
    • Metadata elements: <meta>, <title>, <head>, <link>
    • Multimedia elements: <img>
    • Semantic structure elements: <body>, <main>, <nav>, <header>, <footer>, <section>
    • Spacing elements: <br>, <hr>
  • Use and explain the purpose of HTML entities:
    • &nbsp; (nonbreakable space), &lt; (< symbol), &gt; (> symbol), &amp; (& symbol)
  • Use and describe the purpose of universal HTML attributes:
    • id, class, style
  • Use non-universal HTML attributes for elements as appropriate:
    • src, alt, href, type
  • Use and describe the purpose of WAI-ARIA attributes:
    • aria-disabled, aria-hidden, aria-label, aria-required, role
  • Identify and describe the four key Web Content Accessibility Guidelines (WCAG) principles
    • Perceivable, Operable, Usable, Robust

CSS Presentation and Layout

  • Distinguish basic CSS selector types (element, class, id) and how they are used with HTML
  • Determine which CSS property value would apply based on specificity rules and inheritance
    • Determine which CSS rule would apply (according to specificity) when there are conflicts
  • Distinguish standard CSS value units for sizes (em, rem, %, vw, vh)
  • Write syntactically valid CSS rules for the following purposes
    • Formatting and position: background, color, display, position, top, left, z-index
    • Box model and spacing: margin, border, padding, width, height
  • Determine which element(s) would be affected by a CSS rule that uses group, combined, child, descendent, adjacent sibling, general sibling or attribute selectors
  • Explain the purpose of the inline-block CSS display value
  • Distinguish static, absolute, fixed, and relative position in CSS
  • Identify the components of the CSS box model
  • Distinguish CSS pseudoclasses for various purposes
    • Link states: :link, :visited, :hover, :active
    • Parental ordering: :first-child, :last-child, :only-child, :nth-child(n)

JavaScript Basics

  • Identify basic JavaScript types
    • Number, String, Boolean, Object, null, undefined
  • Write syntactically valid JavaScript for the following actions:
    • Declare, initialize, and modify the values of basic types including arrays and objects
    • Access and modify the values of nested objects (Example: { 'a': [ 1, 2, 3 ] })
    • Create loops using multiple structures, including while, for-in, and for-of
    • Define and use functions that return a single value
  • Predict the output of JavaScript code that uses type coercion and both equality operators
  • Use the document.write() method to add arbitrary HTML content to the DOM
  • Explain the difference between innerHTML, innerText, and textContent
  • Access HTML elements with DOM methods
    • Example: let it = document.querySelector('#item');
    • Example: let it = getElementById('item');
  • Use DOM methods to create new HTML elements
    • Example: let newItem = document.createElement('li');
  • Set HTML element attributes using DOM dot notation
    • Example: a.href = 'other.html';
  • Modify an object’s classList using add, remove, and toggle
    • Example: img.classList.add('py-0', 'm-0');
  • Use DOM methods to add or remove children from an HTML node
    • Example: list.append(newItem);

Study Resources

Reading from Preps 1–5

Sections Topics
1.3, 2.3–2.5 HTTP, URLs
3.2–3.6 HTML Basics
4.1–4.7, 4.8.2 CSS Basics
5.1, 5.3–5.4 Tables & Forms
8.2–8.7, 8.8.1 JavaScript Basics
9.1–9.2 DOM Manipulation

Tasks from Labs 1–5

  • lab 01 – URLs and file paths
  • lab 02 – HTML and JS basics
  • lab 03 – JS objects, arrays
  • lab 04 – CSS basics, spacing

Live Editor Exercises

Alternative Readings

2 - Exam 02: Preparation

This exam will be on paper, and must be taken in-person.

Learning Objectives

Forms

  • 5.3 - Introducing Forms
  • 5.4 - Form Control Elements
  • 5.5 Table and Form Accessibility
  • 5.6 Styling and Designing Forms
  • 5.7 Validating User Input
  • 9.5 Forms in JavaScript

Source Control

  1. git basics
  2. git branching

JavaScript Fundamentals (review)

  • Identify and distinguish JavaScript data types (number, string, boolean, array, object)
  • Evaluate equality tests using both == and ===
  • Use basic control structures for conditions and loops
    • Know when to use for (const x in o) vs. for (const x of o)
  • Evaluate the result of an operation that uses type coercion (string/number concatenation)
  • Use built-in functions (splice(), slice(), pop(), shift(), push(), unshift()) to access and modify arrays
  • Use built-in functions (charAt(), split(), substring()) to access and modify strings

DOM Manipulation and Events

  • Access HTML elements with DOM methods
    • Example: let it = document.querySelector('#item');
    • Example: let it = getElementById('item');
  • Use DOM methods to create new HTML elements
    • Example: let newItem = document.createElement('li');
  • Access and modify fields within an object
    • Example: console.log(obj.x + obj['x']);
  • Set HTML element attributes using DOM dot notation
    • Example: a.href = 'other.html';
    • Example: a.attributes['data-bs-toggle'].value = 'collapse';
  • Modify an object’s classList using add, remove, and toggle
    • Example: img.classList.add('py-0', 'm-0');
  • Redirect a window to a separate page
    • Example: location.href = 'other.html';
  • Use DOM methods to add or remove children from an HTML node
    • Example: list.append(newItem);
  • Add a click event listener to an HTML element
    • Example: button.addEventListener('click', () => alert('clicked'));
  • Explain the behavior of preventDefault() and stopPropagation() on events
  • Determine the target of an event, such as a click
  • Evaluate the effect of event listeners defined for the capture, target, and bubbling phases of propagation

Functional and Asynchronous Programming

  • Create named functions that take parameters and return a value
  • Declare and determine the values of variables based on scope (lexical vs. global)
    • Use both let and const as appropriate
    • Understand why var is not advised for variable declaration
  • Create a variable that stores a function defined using anonymous syntax
    • Example: let f = function(x) { return x + 1; }
  • Distinguish function definition from immediate execution
    • Example: f from above vs. let g = (function(x) { return x + 1; })(5);
  • Create self-executing anonymous functions (typically for initialization)
    • Example: (function() { ... })();
  • Create and predict the behavior of arrow functions with and without optional syntax
    • Example: let x = (s) => { return 'hello ' + s; };
    • Example (omitting optional syntax): let x = s => 'hello ' + s;
  • Create and use object functions
    • Use the this keyword to access the object
    • Understand when the this keyword is bound to an object and when it is not
  • 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);
  • 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(), .find(), .filter(), and .reduce() on arrays
    • Example: list.forEach(it => console.log(it));
    • 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() { ... }

Study Resources

Textbook Reading

The exam is basically about Chapters 7–10, except for the sections we haven’t seen yet (9.5–9.6, 10.2, 10.4). Here are the reading assignments from Preps 7–9:

  • 7.2 - Flexbox Layout
  • 7.3 - Grid Layout
  • 7.4 - Responsive Design
  • 8.8 Functions
  • 8.9 Scope and Closure
  • 9.3 Events
  • 9.4 Event Types
  • 10.1 Array Functions

Preps and Labs

Live Editor Exercises

  • Live Editor
  • Exam 1 Review: JS 1–4, 9
  • Exam 2: JS 5–8, 10–12, 16

Alternative Readings

3 - Exam 03: Preparation

This exam will be on paper, and must be taken in-person on the last day of regular classes.

Learning Objectives

Asynchronous Programming

  • Declare and determine the values of variables based on scope (lexical vs. global) specifically in the context of asynchronous tasks
    • Use both let and const as appropriate
    • Understand why var is not advised for variable declaration
  • 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);
  • async
    • Create and use functions that return a Promise
      • Example: function foo() { return new Promise(resolve => resolve(...); }
    • Create and use functions declared as asynchronous
      • Example: async function foo() { ... }
    • Use fetch to retrieve data from a JSON file for processing
      • Example: 
        fetch(data).then(resp => resp.json()).then(x => console.log(x));
      • Example: 
        const resp = await fetch(data);
const parsed = await resp.json();
console.log(parsed);

Data Persistence and Exchange

  • store information in/retrieve information from the URL (e.g. via the query string)
  • export/import
    • store information (such as the application’s state, e.g. from localStorage) in a file (e.g. a JSON file)
    • read information (such as the application’s state) from a file (e.g. a JSON file) and make use of it (e.g. persist it to localStorage)

Study Resources

The exam primarily focuses on the most recent content. Specifically the asynchronous programming and data persistence and exchange as outlined above.

Preps

Labs

Textbook Reading

Consider reviewing these sections from the past few weeks:

  • 5.6 Styling and Designing Forms

  • 5.7 Validating User Input

  • 9.5 Forms in JavaScript

  • 10.3 Asynchronous Coding with Javascript

  • 10.4 Using Browser APIs

  • 10.5 Using External APIs

  • MDN localStorage

  • MDN FileReader

Our website’s additional resource

For example, some may find @mpj’s promises video linked there to be helpful