Javascript Advanced September 2021

13 September ― 23 October 2021

COURSE CURRICULUM	SOLUTIONS
Syntax, Functions and Statements	Lab | Exercise
Arrays and Nested Arrays	Lab | Exercise
Objects and Composition	Lab | Exercise
DOM Introduction	Lab | Exercise
DOM Manipulations and Events	Lab | Exercise
Advanced Functions	Lab | Exercise
Unit Testing and Error Handling	Lab | Exercise
Classes	Lab | Exercise
Prototypes and Inheritance	Lab | Exercise
Exam Preparation	Part 1 | Part 2 & More

Course Notes

Notes I took to help me during the course.

• Objects & Composition
  
• DOM Manipulation
  
• "this"
  
• Classes
  
• Unit Testing
  

Objects & Composition

const employee = {
  name: 'Ted Thompson',
  job_title: 'Software Developer',
  age: 25,
  unresolved_tickets: 10,
  tickets_left: function() {
    console.log(`Tickets left: ${this.unresolved_tickets}`)
  }
};

// Destructuring assignment
const { name, age } = employee;
console.log(`${name} (${age})`)
const getJobTitle = ({ name, job_title }) => console.log(`${name} is a ${job_title}.`)
getJobTitle(employee)

// Calling the object method
employee.tickets_left()

// Delete property
delete employee.unresolved_tickets
console.log(employee.unresolved_tickets) // undefined

// Nested Destructuring

const company = {
  name: 'Quick Build',
  employees: ['John', 'Jane', 'Sam', 'Suzanne'],
  departments: [
    { name: 'Engineering', director: 'John Jones' },
    { name: 'Finance', director: 'Jane Doe' }
  ],
  contacts: {
  	address: 'Baker Street 221B',
    phone: 111-222-3333
  }
}

const { contacts: {address} } = company; // Baker Street 221B
const [{name}] = company.departments; // Engineering
const { employees: [employeeName] } = company; // John

// Function Library (This technique is often used to expose public API in a module)
const compareNumbers = {
  ascending: (a, b) => a - b,
  descending: (a, b) => b - a
};

// You can use an object instead of switch statement
// 'this' can be used in objects as reference to the parent object

// Factory Function composes object without using this
function createRect(width, height) {

  const rect = { width, height };
  rect.getArea = (
    return rect.width * rect.height;
  };

  return rect;
}

// For ... in
for (const key in obj) {
  console.log(`obj.${key} = ${obj[key]}`);
}

DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

Find element:

getElementById() // get by id
getElementsByClassName() // get by class
getElementsByTagName() // get by tag
querySelector() // any selector

Get or modify:

createElement() // create
appendChild() // add a child element as last
prepend()  // add a child element as first
cloneNode() // clone
remove() // remove
removeChild() // remove child element from parent
replaceChild(newChild, oldChild) // replace child element
getAttribute() // returns value of attributes of specified HTML element
setAttribute() // sets value of an attribute on the specified HTML element
removeAttribute() // remove the attribute with the specified name from an HTML element
hasAttribute() // returns true if the specified attribute exists, otherwise it returns false

Properties

innerHTML // returns and writes the HTML of a given element, careful with this
textContent // reads and writes text
value // gets and sets value
classList // a read-only property that returns a collection of the class attributes of specified element

parent
parentNode
parentElement
children
firstElementChild // returns the first child node
lastElementChild // returns the last child node
nextElementSibling // returns the next node at the same node tree level
previousElementSibling // returns the previous node at the same node tree level

Events

• Event object contains properties that describe the event
• Event types - mouse, touch, keyboard, DOM/UI, focus, form
• Event registration is done by providing a callback function

Three ways to register an event:

• With HTML Attributes
• Using DOM element properties
• Using DOM event handler – preferred method

BOM

The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page.

"this"

When calling an event listener "this" points to the event target.

These methods attach "this" to a function/object. You can't use them with arrow functions!

bind() // creates a copy of the function, can be used to bind params
call() // invokes the function and allows passing args one by one
apply() // invokes the function and allows you to pass args as array

Classes

// Basic class with getters and setter

class Circle {
    constructor(radius) {
    this.radius = radius;
    }
    get diameter() {
    return (this.radius * 2);
    }
    set diameter(diameter) {
    this.radius = diameter / 2;
    }
    get area() {
    return (Math.PI * this.radius * this.radius);
    }
}

// Class with a static method

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static distance(pointA, pointB) {
    const xDiff = pointA.x - pointB.x;
    const yDiff = pointA.y - pointB.y;
    return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
  }
}

// To make a private property readable/writable from any function, it's common to define getters/setters.

class Example {
    #privateField;
    constructor() { this.#privateField = 42 }
    get privateField() { return this.#privateField }
}

const instance = new Example()

console.log(instance.private); //42

class Employee {
    constructor(firstName, lastName, jobTitle) {
      Object.assign(this, {
        firstName,
        lastName,
        jobTitle
      })
    }
}

Unit Testing

• Group tests into nested describe
• Check if params are empty
• Test reverse cases. ex: (0,'1') && ('1', 0)
• Make tests with floats if neccessary
• Check if it's returning or throwing an error
• Keep in mind that NaN is of type number...

// Some useful test examples

expect(() => fn(param)).to.throw('Wrong input!');

expect(fn(param)).to.be.true
expect(fn(param)).to.be.undefined
// To check if an array is the same:
expect(fn(param)).to.deep.equal(['pineapple', 'pizza'])

before() // is run once before all the tests in a describe
after() //  is run once after all the tests in a describe
beforeEach() //  is run before each test in a describe
afterEach() //  is run after each test in a describe

/*
  example:
  you can define this in the start to create a new instance before each test block
*/

beforeEach(() => {
  instance = createCalculator();
})