Section 13: Advanced DOM Interactions - Beyond Querying & Inserting

The goals

💪🏻Attaching  Data to Elements

✌🏻Working with Element Coordinates & Sizes

👍🏻Working with Templates & Dynamic Scripts

👊🏻Navigator, Location & Window.history

 

Dataset

 

 

Offset(Top, Left, Right, Width, Parent ....)

cf. client(Top, Left, Right, ...), scroll(Top, Left, Right....)

 

 

How to load script file dynamically

class App {
  static init() {
    const activeProjectsList = new ProjectList('active');
    const finishedProjectsList = new ProjectList('finished');
    activeProjectsList.setSwitchHandlerFunction(
      finishedProjectsList.addProject.bind(finishedProjectsList)
    );
    finishedProjectsList.setSwitchHandlerFunction(
      activeProjectsList.addProject.bind(activeProjectsList)
    );

    const timerId = setTimeout(this.startAnalytics, 3000);

    document.getElementById('stop-analytics-btn').addEventListener('click', () => {
      clearTimeout(timerId);
    });
  }

  static startAnalytics() {
    const analyticsScript = document.createElement('script');
    analyticsScript.src = 'assets/scripts/analytics.js';
    analyticsScript.defer = true;
    document.head.append(analyticsScript);
  }
}

App.init();

 

clearInterval(), clearTimeout()

clearTimeout() 
The clearTimeout() function in javascript clears the timeout which has been set by setTimeout()function before that.

• setTimeout() function takes two parameters. First a function to be executed and second after how much time (in ms).
• setTimeout() executes the passed function after given time. The number id value returned by setTimeout() function is stored in a variable and it’s passed into the clearTimeout() function to clear the timer.

clearInterval() 
The clearInterval() function in javascript clears the interval which has been set by setInterval() function before that.

• setInterval() function takes two parameters. First a function to be executed and second after how much time (in ms).
• setInterval() executes the passed function for the given time interval. The number id value returned by setInterval() function is stored in a variable and it’s passed into the clearInterval() function to clear the interval.

location and history

The Location protocol property in HTML is used to return the protocol or set the protocol of the current URL. It returns a string which contains the protocol of the current URL, including the colon (:).
Syntax: 

• It returns the protocol property. 
   

location.protocol

• It is used to set the protocol property. 
   

location.protocol = protocol

Property Value: This method accepts single value protocol of string type. It is used to set the protocol of URL. The possible value of protocols are- file:, ftp:, http:, https: etc.
Below program illustrates the Location protocol property in HTML:
Return Value: It returns a string value that representing the protocol of the current URL, including the colon (:)

 

The Window History Object

The history object contains the URLs visited by the user (in the browser window).

The history object is a property of the window object.

The history object is accessed with:

window.history or just history:

navigator()

e.g. navigator.geolocation.getCurrentPosition((data) => {console.log(data)})

 

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

A Navigator object can be retrieved using the read-only window.navigator property.

Check other properties in Mdn web docs

 

Date()

Date() constructor

The Date() constructor can create a Date instance or return a string representing the current time.

const date1 = new Date('December 17, 1995 03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

const date2 = new Date('1995-12-17T03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

console.log(date1 === date2);
// expected output: false;

console.log(date1 - date2);
// expected output: 0

 

Error()

custom error

The Error() constructor creates an error object.

new Error()
new Error(message)
new Error(message, options)
new Error(message, fileName)
new Error(message, fileName, lineNumber)

Error()
Error(message)
Error(message, options)
Error(message, fileName)
Error(message, fileName, lineNumber)
Copy to Clipboard

new Error()
new Error(message)
new Error(message, options)
new Error(message, fileName)
new Error(message, fileName, lineNumber)

Error()
Error(message)
Error(message, options)
Error(message, fileName)
Error(message, fileName, lineNumber)

Examples

Function call or new construction

When Error is used like a function, that is without new, it will return an Error object. Therefore, a mere call to Error will produce the same output that constructing an Error object via the new keyword would.

const x = Error("I was created using a function call!");

// above has the same functionality as following
const y = new Error('I was constructed via the "new" keyword!');

Rethrowing an error with a cause

It is sometimes useful to catch an error and re-throw it with a new message. In this case you should pass the original error into the constructor for the new Error, as shown.

try {
  frameworkThatCanThrow();
} catch (err) {
  throw new Error("New error message", { cause: err });
}

 

 

sources

https://www.geeksforgeeks.org/javascript-cleartimeout-clearinterval-method/

JavaScript | clearTimeout() & clearInterval() Method - GeeksforGeeks

https://www.w3schools.com/jsref/obj_history.asp

Window History Object

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

Navigator - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Error#parameters

Error() constructor - JavaScript | MDN