This Topic Matters Because…
Knowing how to properly structure code, through the use of HTML elements like <table> or JavaScript tools like objects, constructor functions, and/or `prototypes is vital to having a well written project that is not redundant where it does not need to be and is clearly legible and easy to follow.
Concepts or objects which are interconnected with one another through behavior, vocabulary, etc. and are visually represented.
Through building a domain model, it aids in the creation process of a project by defining the encompassing entities/classes, as well as their associations between each other.
Entities and/or Classes are anything and everything that is unique within the content and easily identifiable against others of its kind or of a different kind. What defines an entity/class can be as complicated or simple as it needs to be (i.e. apples to apples, or apples to oranges). Similarly, is their relationships with each other; entities can be of the same kind and related (apples == apples), may be related through association ((apples && oranges) == grow on trees), and so on for other associations.
At a certain point, once enough detail is added in through attributes and properties, we migrate to a Class Diagram.
A table is made of rows and columns, built to structure sets of data in a quick and easy to read manner.
Accessibility tools also have the ability to access and interpret the data of tables when well implemented and structured.
Tables also greatly benefit from styling! Stylistic choices allow the user to quickly discern between different data sets and categories.
- Links to table css and to HTML template.
Know when to use tables and when to not use them as they may hinder accessibility tools, increase markup tag creation and muddle html structure.
<table> and the closing </table> tags are the encompassing tags for table content.
<td> (table data).<tr> element and wrap around <td> elements to define table rows.<th> element to define the start of rows or columns. Also wrapped around by <tr>.
scope attribute allows headers to be associated with the data in corresponding row/column.rowspan and colspan attributes allow cells to span multiple units.<colgroup> and <col>elements, we the developers are able to select/target columns and treat them as one.<table>.
<tr> element and wrap around <td> elements to define table data.<th> element to define the start of rows or columns. Also wrapped around by <tr>.rowspan and colspan attributes allow cells to span multiple units.A sort of template when using object literals; read_06.
object literals and the properties and shared methods; it defines the “structure” of the object and can create new property:value pairs.this differ when used in an object literal versus when used in a constructor?
this in an object ties it to the object in reference. In a constructor, refers to a new object being created.
this to the new object, so you can refer to this in your constructor code”.When an object is built (as a function) with the future in mind to be re-used with differing values per key, this process of invoking the template to create a new object is referred to as functional instantiation; The function itself is a constructor function.
Instead of rebuilding/copy&paste methods used within the constructor for each new instance; the methods are moved to their own object and referenced by the other objects as needed. This prevents the wasting of memory and the existence of large objects.
Object.createA failsafe. Object.create - as it’s name implies; allows the creation of an object that will refer to another object; should a lookup of an object fail.
In other words, if a call to an object key/value pair does not exist; Object.create will link it to am object that should have the corresponding data.
const uncleLeo = {
bald: true,
age: 35,
likesFastCars: true
}
const me = Object.create(uncleLeo)
child.name = 'James'
child.age = 3
console.log(me.name) // James
console.log(me.age) // 3
console.log(me.heritage) // true
In this example, the object me does not contain the key/value pair which the console.log() function is calling for; however, Object.create() has essentially linked me to the uncleLeo object from which it may index the likesFastCars value and output true to the log.
Combining all three methods, Instantiation with Shared methods and Object.create, allows for cleaner code.
A common feature built in to javaScript, that deals with having to manage an entirely separate object in order to share methods across different instances.
A prototype property is something that every function in javaScript has, object.prototype.method.
The new keyword works in tandem with the this keyword during the creation of an object.
prototypes are a built in property into all functions that allows the sharing of methods across all instances of a function.inheritance is moving up the ladder and being able to retrieve data that an object may not have.A well built out table is easily interpreted by most* screen readers.
In addition to column/row headers, there are many other elements that exist solely for marking up table content, such as:
<caption> - nested within <table> and right after the opening tag for best placement. Provides a brief description regarding the contents of the table.<thead>, <tbody>, and <tfoot> - much like their non-table counterparts for an HTML document; provide structure to the build of the table. No visual enhancements and mainly useful when applying styling.scope - covered up aboveid / headers - attributes that function similarly to scope by creating associations between plain cells and header cells.constructors and prototypes in actionObject.create