unit4_description.md

Unit 4

Objective

Deploy an application that accepts user input, requests data from an external source, and manipulates the DOM

Discuss Key Frontend concepts

• Define and describe AJAX
• Define and describe DOM
• Define and describe CSS
• Define and describe HTML
• Describe how events work
• Describe jQuery
• Describe event delegation / bubbling (no need to know capturing)
• Describe how linking to stylesheets / images / scripts works as far as requests/responses
• Describe how URLs are resolved in a browser (taking missing pieces from the current URL)

DOM Manipulation

• Write JavaScript against the DOM API
  • Includes event handlers for clicks, key events, submit events
  • Creates and appends DOM elements
  • Uses event delegation to capture events from dynamically added elements
  • Finds existing elements by id and className in order to make changes
  • Mutates properties on existing DOM elements such as style, classNames
  • JavaScript appears at bottom of body tag, or uses DOMContentLoaded/$.ready to attach properly
• Target, create, and manipulate DOM Elements
  • Creates and appends DOM elements
  • Finds existing elements by id and className in order to make changes
  • Mutates properties on existing DOM elements such as style, classNames
  • JavaScript appears at bottom of body tag, or uses DOMContentLoaded/$.ready to attach properly

Events

• Respond to event with event listeners
  • Includes event handlers for clicks, key events, submit events
  • Uses event delegation to capture events from dynamically added elements

HTML Forms

• Build valid and functional forms
  • Forms include an action, method, submit button
  • Forms appropriately use labels with inputs
  • Input fields include a name attribute
  • Radio buttons are part of the same group

Higher Order Functions

• Define and call higher order functions
  • Write a function that takes a function as a parameter and calls it
  • Call a higher order function, passing it an anonymous function as a argument
  • Call a higher order function, passing it a named function as a argument
  • Call a higher order function, passing it a reference to a function as an argument
  • Identify addEventListener as a higher order function

HTTP

• Discuss key concepts of HTTP
  • Describe and define the parts of a URL
  • Describe the 3 parts of an HTTP Request
  • Describe the 3 parts of an HTTP Response

AJAX

• Fetch and Send JSON through AJAX
  • Make a POST request and send a JSON payload
  • Make a GET request and parse the result as JSON
  • Can use jQuery, Axios or raw XMLHttpRequest

Deployment

• Deploy a static site
  • App appears on the internet with no broken links / images
  • All linked files match their references case-sensitively