Day 2: Objects and Functions

Wednesday, June 1, 2016

Solution to Tuesday’s homework: FirstJS (Basic Form)

Topics

Functions

  • Function expressions
  • Functions as variables
  • Functions as object properties (methods)
  • Variable scope
  • IIFEs: Immediately Invoked Function Expressions
  • Function invocation and the value of this
    • As functions, e.g. someFunction(): this === window (i.e. the global object)
    • Warning: This includes functions defined within other functions.
    • As methods, e.g. someObject.someMethod(): this === someObject (i.e. the object on which the method was called)
    • As event handlers, e.g. someForm.onsubmit = someFunction: this === someForm (i.e. the object that fired the event)

Objects

  • Object literals
  • Property naming
  • Retrieving property values
  • Setting property values

DOM

  • Creating elements (document.createElement('li'))
  • Setting style properties on elements (someElement.style.backgroundColor = 'CadetBlue')
  • Appending child elements (someList.appendChild(someItem))

Selectors

  • Descendent (ul li) and child (ul > li)

CSS Properties

  • background-color
  • border
  • height
  • list-style
  • width

Organizing Code

  • .js files (<script src="app.js"></script>)
  • Wrapping in an IIFE ((function() {})();)
  • Wrapping in a object-literal ({})

Presentations

Presentations have been converted from their original format to play in web browsers.

Projects

Homework: Megaroster

Create a class roster.

Baseline Goal

  • User can enter a name to be added to the roster.
  • Name will be added to the end of a list

Bonus Credit

  • Create at most one global variable.

Mega Bonus Credit

  • Add names to the top of the list.

Super Mega Bonus Credit

  • Add a delete link to every list item that removes the name from the list when clicked.

Super Mega Bonus Credit Hyper Fighting

  • Add a promote link to every list item that draws a border around that item when clicked.

Update: Solution: MegaRoster with delete and promote