reading-notes

Class Seven Notes (201)

More on Object-Oriented Programming, HTML Tables

Lecture Notes

• constructor functions: using functions to create Objects

function ConstructorFunction(x) { this.x = value0; this.a = value1; this.b = value2; this.newFunction = function() { //code to be part of the function};
} }

// we use the keyworkd new to create a new instance of the construtor function let xxx1 = new ConstructorFunction(); let xxx2 = new ConstructorFunction(); //output would contain the keyworkd ConstructorFunction

//create new properties of the constructorFunction for one object variable.newInstance = ‘a string’

create new properties for all objects created, use keyworkd prototype ConstructorFunction.prototype.newInstance = ‘a string’

use a for-loop to invoke all student at once let array = [array[0], array[1],array[2]]; //create instances of items to be iterated for (let i=0; i < array.length, i++) {array[i].newFunction()};

more DOM stuff today: xxx.setAtrribute(‘HTML attribute”, value)

Lecture Notes (tables on HTML)¹

• <thead> and <tbody> and <tfoot> are used to create an HTML table, must follow the order of Head – Data – Foot, and they all must be children of <tr>, otherwise browser will re-organize it to such order
• <table> – <thead>, <tbody>, <tfoot> –<tr> – <th>, <td>, <tf>

Domain Modeling²

• Domain modeling models a problem, such that there’s a direction to find the solutions

HTML Table Basics³

• Tables should be used as they are very readable, and they are accessible to screen reader clients, so it’s helpful for visually impaired users
• Examples of <table> semantic tags include: <th> (table headers), <td> (table data), <tr> (table row), <colspan>, <rowspam>

Intro to Constructors^{4 5}

• A Constructor is a function called using the new key word, such that a new object will be creaetd
• this can be used to bind to the constructor code and refer to itself

• examples of a prototype: I used to have to make chemical models before running the experiment. More basic scientific experiment required me do prototype the reaction on paper, more advanced ones requires programming

• more on DOM: let variable = documen.querySelector(<any CSS selector>)

Things I want to know more about

• how to make my code from lab6 more clean?

Back to main page

References

1. https://www.w3schools.com/html/html_tables.asp ↩

2. https://github.com/codefellows/domain_modeling#domain-modeling ↩

3. https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics ↩

4. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#introducing_constructors ↩

5. https://ui.dev/beginners-guide-to-javascript-prototype ↩