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() { ... }
  • Create and use functions that return a Promise
    • Example: function foo() { return new Promise(resolve => resolve(...); }

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