Exam 2: 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.
Learning Objectives¶
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)
- Know when to use
- 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');
- Example:
- Use DOM methods to create new HTML elements
- Example:
let newItem = document.createElement('li');
- Example:
- Access and modify fields within an object
- Example:
console.log(obj.x + obj['x']);
- Example:
- Set HTML element attributes using DOM dot notation
- Example:
a.href = 'other.html';
- Example:
a.attributes['data-bs-toggle'].value = 'collapse';
- Example:
- Modify an object's classList using add, remove, and toggle
- Example:
img.classList.add('py-0', 'm-0');
- Example:
- Redirect a window to a separate page
- Example:
location.href = 'other.html';
- Example:
- Use DOM methods to add or remove children from an HTML node
- Example:
list.append(newItem);
- Example:
- Add a click event listener to an HTML element
- Example:
button.addEventListener('click', () => alert('clicked'));
- Example:
- 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
andconst
as appropriate - Understand why
var
is not advised for variable declaration
- Use both
- Create a variable that stores a function defined using anonymous syntax
- Example:
let f = function(x) { return x + 1; }
- Example:
- Distinguish function definition from immediate execution
- Example:
f
from above vs.let g = (function(x) { return x + 1; })(5);
- Example:
- Create self-executing anonymous functions (typically for initialization)
- Example:
(function() { ... })();
- Example:
- 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;
- Example:
- 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
- Use the
- 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; }
- Example:
- 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'));
- Example:
- Use fetch to retrieve data from a JSON file for processing
- Example:
fetch(data).then(resp => resp.json()).then(x => console.log(x));
- Example:
- Create and use functions declared as asynchronous
- Example:
async function foo() { ... }
- Example:
- 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 8–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:
- 8.8 Functions
- 8.9 Scope and Closure
- 9.3 Events
- 9.4 Event Types
- 10.1 Array Functions
- 10.3 Asynchronous Coding
- 10.5 Using External APIs
Preps and Labs¶
Note: Prep 6 (Grid Layout and Responsive Design from Chapter 7) will not be on this exam. But the final exam is cumulative, so you might see those topics in the future.
- Prep 7 – DOM and Events
- Prep 8 – Array Functions
-
Prep 9 – Using Plotly.js
-
Lab 6 – Events and Bootstrap
- Lab 7 – Fetch, Map, Filter
- Lab 8 – JSON and Promises
Live Editor Exercises¶
- Live Editor
- Exam 1 Review: JS 1–4, 9
- Exam 2: JS 5–8, 10–12, 16
Alternative Readings¶
- js-cheatsheet.pdf (source)
- JS-Cheat-Sheet.pdf (source)
- es6cheatsheet.pdf (source)
- All Over the Web Chapters 8–9 (free book by Dr. Chris Johnson)