Skip to content

Exam 3: Preparation

Important

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 resources below to review and practice further.

Heads Up!

These are the learning objectives from last year, to give you a sense of what the exam we did in class was based on. The percentages and exam format will be different this year: more like a coding exam, with fewer and longer questions.

Learning Objectives

HTML and Web Fundamentals (20%)

  • 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
  • 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>, <audio>, <video>
    • Semantic structure elements: <body>, <main>, <nav>, <header>, <footer>, <section>
    • Form and interaction elements: <form>, <input>, <button>, <label>
    • Spacing elements: <br>, <hr>
  • Use non-universal HTML attributes for elements as appropriate:
    • src, alt, href, type, for, required, placeholder
  • Use and describe the purpose of universal HTML attributes:
    • id, class, style

CSS Presentation and Layout (20%)

  • Distinguish basic CSS selector types (element, class, id) and how they are used with HTML
  • Determine which CSS property value will be applied based on specificity rules and inheritance
  • Determine which element(s) would be affected by a CSS rule that uses group, combined, child, or descendent selectors
  • Define and use custom CSS rules using common formatting and position properties:
    • background, color, display, position, width, height, top, left, z-index
  • Define and use custom CSS rules to control an element based on the box model:
    • padding, margin, border
  • 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

JavaScript Fundamentals (20%)

  • Identify and distinguish primitive data types (number, string, boolean, array, object)
  • Evaluate equality tests using both == and ===
  • Use basic control structures for conditions (if/else) and loops (for/while)
    • 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 (e.g., concatenating a string and number)

DOM Manipulation and Events (15%)

  • 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 common HTML element attributes (href, src, alt, id, etc.) 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');
  • 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
  • Evaluate the effect of event listeners defined for the capture, target, and bubbling phases of propagation

Functions and Functional Programming (15%)

  • 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; }
  • Create self-executing anonymous functions (typically for initialization)
    • Example: (function() { ... })();
  • Create and predict the behavior of arrow functions
    • 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);
    • 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() { ... }
  • Create and use functions that return a Promise
    • Example: function foo() { return new Promise(resolve => resolve(...); }

Data Persistence and Security (10%)

  • Distinguish the three basic components of the CIA triad model of security (confidentiality, integrity, availability)
  • Identify the purpose of common cookie attributes and their role for security
    • SameSite, HttpOnly, Secure, Expires
    • Example: document.cookie = 'session=872fed; HttpOnly; SameSite=Strict';
  • 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
  • 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.
  • Store and retrieve JavaScript text values with localStorage and sessionStorage
    • Example: localStorage.setItem('username', 'alice');
    • Example: let name = localStorage.getItem('username');
  • Determine which CSS or JavaScript file will be used based on a Content Security Policy
    • Example: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https:; css-src 'unsafe-inline'; style-src *.jmu.edu" />
  • Distinguish the intended purposes of basic authentication, CSP, and CORS

Study Resources

The exam is cumulative, so you might need to review the content from Exam 1 an Exam 2. See also the cheat sheets at the bottom of those two pages.

Textbook Reading

Consider reviewing these sections from the past few weeks:

Preps and Labs