Object-Oriented Programming and HTML tables

Domain Modeling

source: Github repo codefellows/domain_modeling

Domain modeling is the process of creating a conceptual model in code for a specific problem.

Constructor functions

//define a constructor function
let hotel = function(rooms, stars) {
  this.rooms = rooms;
  this.stars = stars;
}

//instantiates a new object fourSeasons of type hotel with rooms:72 and stars:4
let fourSeasons = new hotel(72, 4);
//same thing but for object hilton. These act as DIFFERENT objects.
let hilton = new hotel(146, 4);

This is the start of object-oriented programming in JS.

1. The new keyword creates an object
2. The constructor function initialized properties inside the object using this
3. The object is stored in a variable for later use

Object prototypes can be assigned methods, which are then shared between objects that share the prototype, such as fourSeasons and hilton in our example above.

Tables

An HTML table presents information in a grid format.

• <table> - creates a table. Contents are written row by row.
• <tr> - indicates at table row. Followed by one or more <td> elements
• <td> - indicates a cell of a table.
  • spanning columns (horizontal) can be accomplished with the colspan="num" attribute
  • spanning rows (vertical) can be done with rowspan="num" attribute
• <th> - indicates a heading for the tables. Uses attribute scope="col"/"row" to specify.

Long tables may be comprised of a header, main body, and footer and can use the following elements to help screen readers make sense of our data and to make CSS styling easier:

• <thead> - the headings of the table (<th> tags) should be placed in this
• <tbody> - place for the body of our data. Can still include <th> if necessary
• <tfoot> - used for the footer of a table. This might be used for totals or something similar that would be traditionally be placed at the bottom of a table.

Functions, Methods, and Objects

Object constructors can be used to make objects based on a template:

//we start by defining the characteristics of our objects
function pokemon(name, level, type){
  this.name = name;
  this.level = level;
  this.type = type;
  this.speak = function(){
    console.log(this.name.toUpperCase() + '!!!');
  }
}

//we can now make a new pokemon object in one line using the 'new' keyword!
let snorlax = new pokemon(snorlax, 53, normal);

Properties can be easily added dot notation, and removed using the delete keyword.

//adds snorlax's pokedex number to the object
snorlax.number = 143

//removes pokedex number if we decide we don't want to store it
delete snorlax.number;

Arrays are objects. Arrays can be placed in objects and objects can be placed in arrays. This allows for the creation of complex nested data structures.

Built-in objects.

Browsers have several built in objects that can generally fall into one of 3 catagories

1. Browser object model - used to manipulate the broswer in a number of ways.
2. Document object model - collection of methods and properties used to interact with HTML nodes on the DOM
3. Global javascript objects - collection of built in porperties and methods for interation with datatypes and relation to real-world concepts such as time.

Dates and time

The format for date and time is YYYY, MM, DD, HH, MM, SS with the following syntax:

• Year: four digits
• Month: 0-11 (Jan is 0)
• Day: 1-31
• Hour: 0-23
• Minutes: 0-59
• Seconds: 0-59
• Milliseconds: 0-999