Programming with JavaScript

Explore JavaScript fundamentals, including syntax and dot notation, expressions, variables and their declaration and assignment, data types, operators, type conversions, and built-in functions like alert and console.log, with labs.

Explore the syntax of JavaScript, including dot syntax for object access, statements, punctuation, and blocks, and learn how to name variables with camel case and use comments.

Identify literal expressions such as numbers, strings, booleans, objects, arrays, and functions, and build complex expressions with variables and operators. Explain strict mode and reserved keywords for valid JavaScript.

Explore how JavaScript variables store values using identifiers that start with a letter, underscore, or dollar sign, noting case sensitivity. Learn declaration, assignment, dynamic typing, coercion, hoisting, and constants.

Explore primitive and object data types in JavaScript, including strings, numbers, booleans, and undefined, plus wrappers and string manipulation with escape sequences.

Explore JavaScript data types, including numbers, strings, booleans, and objects, NaN and undefined, plus implicit/explicit conversions with toString and parseInt/parseFloat.

Explore JavaScript operators, including assignment, arithmetic, comparison, logical, and string concatenation, with examples of modulus, increment, decrement, and the difference between double equals and triple equals.

Explore helpful JavaScript functions like alert, confirm, and prompt to interact with users, display results in the browser or console, and work with the DOM during labs.

Build a simple mpg calculator using prompts, variables, and data type conversions to compute miles per gallon from miles driven and gallons. Demonstrate input handling, parsing, and browser output formatting.

Build a test scores average application that prompts for up to three scores, parses inputs, computes the total and average, and displays each score plus the final average.

Explore block statements in JavaScript by using braces to group statements into a block, noting they are optional unless used in conditionals, loops, or functions.

Explore how conditional statements drive decision making in JavaScript, using if-else, else-if, and switch, with nested statements to execute code when conditions are true or false.

Explore if, else, and else if statements to handle user input and messaging. Learn about strict equality, parsing numbers, grade ranges, and switch as an alternative.

Explore single statement suites as a compact alternative to multi-line if statements, using a condition with ? and : to select between two statements.

Demonstrates nested if statements in JavaScript to compute discounts from customer type (retail, wholesale, other) and total thresholds (0–100, 100–250, and less than 500), with output to the browser.

Explore how the switch statement in JavaScript provides a compact alternative to if-else, using case labels, a break, and a default, shown through a grade articulation example.

Use conditional logic to build an invoice app that calculates discounts based on total and customer type (retail 10%, wholesale 20%), parsing the total as a float.

Explore looping statements in JavaScript, including for, while, do-while loops, and nested loops, with break and continue control statements to repeat blocks while conditions stay true.

Master how to use for-in loops in JavaScript to iterate over sequences, including arrays, objects, and strings, with initial, condition, and increment expressions.

Explore the while loop in JavaScript, which repeatedly checks a condition, executes code while true, and terminates when the condition becomes false, unlike the for loop with declaration and increment.

Explore the do while loop in JavaScript, which runs a statement first and then checks the condition. It contrasts with the while loop and ensures at least one execution.

Learn how break and continue control statements terminate or skip iterations in loops, illustrated with a name search through an array and a dynamic for loop.

Explore nested loops in JavaScript with an outer for loop that runs three times and an inner while loop collecting three scores between 0 and 100 to total the score.

This lab builds a JavaScript mpg calculator v2 that uses a do loop to gather miles driven and gallons, validates input, computes mpg, and prompts restart with y or n.

Create a future value calculator that uses a for loop to compute investment growth from user-entered amount, rate, and years, prompted interactively, then display the final value.

Explore the basics of JavaScript functions, including global and declaration functions, parameters, by value versus by reference, function expressions and anonymous functions for dom elements, with a simple number-guessing game.

Explore how a function is a named block of code that executes when called, enabling reuse, and learn to create your own functions while using global, top-level, and built-in functions.

Discover how JavaScript global functions work, including parseFloat, parseInt, and Number, and use isFinite, isNaN, encodeURI, and decodeURI to safely convert types and encode inputs.

Passing parameters to functions lets a function accept color, make, and model as arguments, enabling varied car outputs and preventing undefined errors.

Explore by value versus by reference in JavaScript functions, showing how primitives pass as copies while objects pass references that modify the original.

Explore how the arguments object enables a function to handle a variable number of parameters by iterating with arguments.length and referencing each argument.

Return values from functions to the calling application, transferring results back to the caller. Demonstrate returning base values instead of using the window document, and distinguish functions from subroutines.

Explore variable scope in JavaScript by contrasting global and local variables, understanding lexical scoping, and examining how hoisting affects declarations and access within functions.

Enable strict mode with 'use strict' at the top of every function to prevent global variables and catch misspellings and missing declarations, and use a linter to surface these errors.

Explore function expressions as a core JavaScript concept, covering variable assignment functions, immediately invoked function expressions, assigned and invoked functions, property assignment, callback, closure, and aero functions.

Explore anonymous functions, known as variable assignment functions, by assigning a function to a variable, using parameters, returning the sum of two numbers, and noting syntax, spacing, and lint considerations.

Use an anonymous function to select a DOM element by ID and return its value, demonstrated with an email input and a dollar function using getElementById.

Build a guess the number game using functions in JavaScript. Implement display title and main game loop, guiding users to guess 1–10 with high/low feedback and attempt count.

Explore the JavaScript event model, including classic handlers and addEventListener. Learn about events like load, click, focus, and propagation, with four demos and a future value lab using text boxes.

Explore how the browser broadcasts events, and listen using inline html attributes, the element property method, or the event listener method to respond to button clicks, dropdowns, and page loads.

Explore traditional JavaScript event handling, including the inline HTML attribute method and getElementById approach, and learn how DOM loading affects attaching on click handlers.

Learn to handle browser events with addEventListener, using a button example and a callback or user-defined function. Understand the event object and the capture versus bubbling phases.

Explore common HTML DOM events across mouse, keyboard, window, and form categories, and practice handling load and click to build interactive JavaScript apps.

Explore how the event object is created and passed to event listeners, revealing properties like target, currentTarget, phase, and timeStamp. Learn to control browser behavior with preventDefault, stopPropagation, and dispatchEvent.

Demystify event propagation in the document object model, detailing capture, target, and bubbling phases, and demonstrate delegation by listening on a parent element to handle child events.

Master event delegation by attaching a single listener to a parent to handle clicks from multiple child elements, using the bubbling phase and event target to log each button's text.

Learn how stopPropagation interrupts the event flow to keep a child lightbox from closing when clicked, with a demo showing capture and bubbling phases and an option for stopImmediatePropagation.

Use preventDefault() to stop browser actions on events, demonstrated in a drag-and-drop shopping cart app that uses the drag and drop API to show dropped book titles in the cart.

Explore the future value application by entering monthly investment, yearly interest rate, and years in a dynamic form, then trigger a calculation to display the future value.

Explore arrays in JavaScript, including adding, removing, iterating, and displaying items, using functions to manipulate arrays and persist data with web storage through a task manager example.

Learn how to create arrays in JavaScript using constructor and literal notation, understand zero-based indexing, and access elements by index with square bracket syntax, including mixed and string arrays.

Explore creating and growing arrays in JavaScript with constructor and literal notation, manipulating elements by index, checking length, and deleting items or clearing the array.

Iterate through a JavaScript array to process items using for loops and the forEach method. Learn why for...in can expose prototype properties and how to filter with hasOwnProperty.

Explore array members in JavaScript, using methods like slice, push, pop, join, sort, splice, and the length property, plus ECMAScript 5 additions such as indexOf, forEach, map, and reduce.

Learn how to add and remove items in an array using push, pop, shift, and unshift, including how each method returns the affected elements or new length.

Explore how indexOf, lastIndexOf, reverse, and sort enable searching, reversing, and sorting arrays, illustrating element lookup, last occurrence, order reversal, and alphabetical or numeric sorting.

Explore copying, slicing, and concatenating arrays in JavaScript using concat, join, slice, and splice. See how to join arrays, convert to strings, extract sections, and replace removed elements.

Master JavaScript array filtering with filter, every, some, reduce, and reduceRight. See how to filter numeric values and reduce arrays to a single value.

Explore utility functions in JavaScript, including toString, isArray, and map, and learn how to convert arrays to strings, check for arrays, and apply a function to each element.

Build an employee management application in JavaScript by using array functions to show, add, and delete employees, while interacting through a console menu and prompts.

Explore associative arrays in JavaScript by using string keys such as id and name, note they're not treated as real arrays, so length is zero and linters may flag them.

Explore how to work with two-dimensional arrays in JavaScript, using arrays of arrays, looping with for loops and forEach, and accessing nested elements.

Learn how web storage in JavaScript persists data using localStorage and sessionStorage, with the setItem, getItem, removeItem, and clear methods, plus practical examples like a hit counter.

Learn to build a persistent task manager using arrays and web storage, adding and clearing tasks, displaying a sorted list in a textarea, and wiring DOM events.

Explore the window object and browser object model to control the browser, manage windows and frames, and implement intervals and timeouts toward the document object model and scripting forms.

Explore the window object in JavaScript, its role as the root for browser and document object model interactions, and how it provides access to many built-in functions and properties.

Explore the navigator object, its user-agent, language, platform, and geolocation properties, and learn how to detect browsers like Chrome, Safari, and Firefox using a simple detector script.

Learn how window.location exposes the URL via properties like origin, hash, search, pathname, port, hostname, and protocol, and how to redirect or reload using assign, replace, and reload.

Discover how the history object tracks a browser session, letting you check pages visited and navigate with back, forward, and go methods, including reloading the page.

Explore how window.frames provides a collection of all frames on a page, including iframes, and how to access, reload, and manage frames such as using frame indices and parent windows.

Explore how the window and Screen objects reveal the user's screen and browser dimensions, including width, height, available width and height, color depth, and pixel depth.

Explore how window.open creates a pop-up window and window.close shuts a pop-up or the main window, with url, name, and features like height, resizable, and status.

Learn how window.moveTo() and window.resizeTo() control the browser window’s position and size. Implement move by and resize by, and center a popup on screen using screen dimensions.

Master window.setTimeout and window.setInterval to schedule code, cancel with clearTimeout and clearInterval, and apply examples like delaying a console log, displaying a message after a click, and a carousel update.

Explore the document object within the window, representing the currently loaded page, and see how its members compose the document object model, a massive topic reserved for a dedicated lecture.

Rebuild a classic login popup using window.open and the opener object to pass username and password back to the parent page and display results.

Explore DOM scripting basics and practical form handling, including accordion interactions and a user registration flow with validation, error messaging, and redirection, plus a preview of regular expressions.

Explore how the dom standard provides a platform- and language-neutral interface for scripts to access and update a document's content, structure, and style across core, views, events, traversal, and range.

Explore the DOM core specification and its nodes, from the node and document interfaces to the element, attribute, and character data interfaces, and learn their key properties and methods.

Explore the node interface as the foundation for manipulating web content, using first child, last child, child nodes, and next element sibling to read and set text.

Explore the document interface to select and manipulate DOM elements using getElementById, querySelector, querySelectorAll, getElementsByTagName, and getElementsByClassName, including unique IDs and array-based selections.

Explore the document interface's core properties and methods, such as body, head, forms, images, links, and ready state, plus create, insert, remove, and replace operations for dynamic DOM scripting.

Explore the element interface to manipulate individual elements via attributes, class list, id, tag name, and text content. Learn to get, check, set, and remove attributes with the document interface.

Explore the attribute interface for dom elements, focusing on the name and value properties and how to iterate and display each attribute.

Explore the HTML DOM and DOM core, focusing on the HTML element interface, where each HTML tag is an object you access with dot notation to read attributes like id.

Learn how to retrieve and manipulate dom elements with JavaScript using get elements by tag name and set attributes like id, title, href, and src on forms.

Build an accordion-style faqs application in Lab 12 using plain JavaScript to toggle panels with plus and minus icons, manipulating the document object model with nextElementSibling and class attributes.

Explore practical DOM techniques for forms and form objects by retrieving and setting text box values, handling events, and dynamically populating and reading from dropdowns, checkboxes, and radio buttons.

Build a JavaScript and DOM scripting based registration form with basic validation for email, phone, country, and terms, showing error messages before redirecting to the success page.

Explore how JavaScript handles strings, including methods to transform case, split, join, and replace, and use regular expressions for pattern matching and validation with the RegExp object.

Explore strings in JavaScript by distinguishing string literals and string objects, using the length property, and chaining methods like trim, toUpperCase, and toString for explicit conversions.

Learn how to loop through every character in a string with JavaScript using a for...in loop and a hasOwnProperty check, logging each character to the console.

Explore how JavaScript converts text to upper or lower case with toLowerCase and toUpperCase, and how locale aware variants toLocaleLowerCase and toLocaleUpperCase adjust for regional settings.

Learn to normalize user input in JavaScript by trimming unwanted spaces with the trim method and converting text to lowercase or uppercase to ensure command input is correctly processed.

Explore methods to retrieve parts of a string in JavaScript, including charAt and charCodeAt, indexOf, lastIndexOf, and search, plus slice and substring for extracting substrings.

Learn to use the replace method to search and replace strings, including regular expressions, with practical examples like swapping Honda Civic for Chevy Camaro.

Learn how the split method turns a string into an array of strings using a delimiter, then access and manipulate the resulting array elements with indexing.

Join strings with the concat method to combine make and model into one value, Chevy Camaro, and explore string methods like length, case, trim, split, and join.

Discover how regular expressions drive pattern matching and validation in JavaScript, use search, match, and replace with /pattern/modifier syntax for text processing, and validate web forms with pattern attributes.

Explore the string match modifiers in JavaScript: global, case-insensitive, and multi-line searches. Learn how g, i, and m affect pattern matching and when each is used.

Explore how brackets in regular expressions define character ranges, match specific characters, and use alternatives to search for digits and patterns like zip codes, telephone numbers, and social security numbers.

Explore metacharacters in regular expressions, such as dot, \w, \W, \d, and \s, to identify characters, digits, and whitespace. See how the global modifier returns matches as arrays.

Explore quantifiers in regular expressions to enable dynamic pattern matching, using digits, hyphens, and the end or beginning of a string to validate zip codes and match five digit sequences.

Learn to use the regular expression object in JavaScript to validate inputs, like zip codes, with properties global, ignore case, multi-line, source, and methods execute and test.

Build a word list application that processes a paragraph to extract words with the string object and regular expressions, counts duplicates, and displays unique words and their frequencies in console.

Examine JavaScript numbers, math, and dates through the Number, Math, and Date objects. Build a dice game and a countdown tool that shows days left to an event.

Explore JavaScript numbers: learn the single number type, numeric literals and the Number object, and master methods like toFixed, toExponential, and isFinite for precise arithmetic and edge cases.

Explore the JavaScript math object and its methods—pi, abs, ceil, floor, max, min, pow, random, round, and sqrt—through practical rounding for a dice game lab. Part 1 introduces these members.

Learn essential JavaScript math functions, including max, min, pow, random, round, and square root, with practical examples for web development and business logic.

Build the pig dice game in JavaScript by applying numbers and the math object to manage turns, dice rolls, holds, and losing points when a one is rolled.

Learn to use the JavaScript Date object: create dates with new Date(), from strings, from milliseconds, or by specifying full date-time, then apply get/set methods and UTC vs local time.

Learn to manipulate JavaScript dates using set methods and format with date string, time string, and UTC string, then compute elapsed time between dates in days.

Build a JavaScript event countdown app that reads an event name and date, calculates days until the event using date objects, and validates input to display a live countdown.