Category: JavaScript

Sometimes, we want to clear a chart from a canvas so that hover events cannot be triggered with Chart.js and JavaScript.

In this article, we’ll look at how to clear a chart from a canvas so that hover events cannot be triggered with Chart.js and JavaScript.

How to clear a chart from a canvas so that hover events cannot be triggered with Chart.js and JavaScript?

To clear a chart from a canvas so that hover events cannot be triggered with Chart.js and JavaScript, we call destroy to destroy the chart.

For instance, we write

let myPieChart = null;

//...

const drawChart = (objChart, data) => {
  if (myPieChart !== null) {
    myPieChart.destroy();
  }
  const ctx = objChart.getContext("2d");
  myPieChart = new Chart(ctx).Pie(data, { animateScale: true });
};

to create the drawChart function that calls myPieChart.destroy if myPieChart isn’t null to clear the chart.

Then we get the objChart‘s canvas context with getContext.

And we set myPieChart to a new chart created within the ctx context.

Conclusion

To clear a chart from a canvas so that hover events cannot be triggered with Chart.js and JavaScript, we call destroy to destroy the chart.

Sometimes, we want to write nested functions in JavaScript.

In this article, we’ll look at how to write nested functions in JavaScript.

How to write nested functions in JavaScript?

To write nested functions in JavaScript, we can define functions inside functions.

For instance, we write

const a = (x) => {
  const b = (y) => {
    return x + y;
  };
  return b;
};
console.log(a(3)(4));

to define function b in function a.

We return function b in the last line of a.

And then we call a with 3 to return b.

Then we call b with 4 to get 7.

Conclusion

To write nested functions in JavaScript, we can define functions inside functions.

Sometimes, we want to get the nth occurrence in a string with JavaScript.

In this article, we’ll look at how to get the nth occurrence in a string with JavaScript.

How to get the nth occurrence in a string with JavaScript?

To get the nth occurrence in a string with JavaScript, we can use the split and join methods.

For instance, we write

const string = "XYZ 123 ABC 456 ABC 789 ABC";

const getPosition = (string, subString, index) => {
  return string.split(subString, index).join(subString).length;
};

console.log(
  getPosition(string, "ABC", 2)
);

to define the getPosition function.

In it, we call string.split with subString and index to split the string starting at index with subString as the separator.

Then we call join with subString to join the returned string array back into a string and get its length.

Then we get the start index of the 2nd 'ABC' with getPosition(string, "ABC", 2).

Conclusion

To get the nth occurrence in a string with JavaScript, we can use the split and join methods.

Sometimes, we want to detect touch screen devices with JavaScript.

In this article, we’ll look at how to detect touch screen devices with JavaScript.

How to detect touch screen devices with JavaScript?

To detect touch screen devices with JavaScript, we check if the ontouchstart property is in document.documentElement.

For instance, we write

const isTouchDevice = "ontouchstart" in document.documentElement;

to check if the 'ontouchstart' property is in document.documentElement to check if the device supports touch.

Conclusion

To detect touch screen devices with JavaScript, we check if the ontouchstart property is in document.documentElement.

Sometimes, we want to override JavaScript’s toString() function to provide meaningful output for debugging.

In this article, we’ll look at how to override JavaScript’s toString() function to provide meaningful output for debugging.

How to override JavaScript’s toString() function to provide meaningful output for debugging?

To override JavaScript’s toString() function to provide meaningful output for debugging, we can add the Symbol.toStringTag method into our class.

For instance, we write

class Person {
  constructor(name) {
    this.name = name;
  }
  get [Symbol.toStringTag]() {
    return "Person";
  }
}

let p = new Person("Dan");
Object.prototype.toString.call(p);

to create the Person class that has the Symbol.toStringTag which returns the string that’s logged when we call toString on a Person instance.

Then we create the p Person instance.

Finally, we call Object.prototype.toString.call with p to call toString using the overridden toString method we created.

Conclusion

To override JavaScript’s toString() function to provide meaningful output for debugging, we can add the Symbol.toStringTag method into our class.