Please help my conception of object oriented programming in JavaScript / HTML / CSS / DOM

by Devin van Cruchten   Last Updated August 14, 2019 11:05 AM

So I have some experience with C++ and Qt and I am learning JavaScript now. I already discovered that JavaScript added a sort of semi-object oriented programming into JavaScript with ES6.

Now when I was watching this video, I saw that the tutor is using the position function on a canvas object and a h1 object.

I recognise these kind of things from using C++ with the Qt library. The objects created from the Qt Classes had functions and inherited functions from parent classes, also called with the dot. (object.function)

Now is this behavior showed here the same? Is he using the new ES6 class features when he uses h1.position()? Is position() inside a h1 class or in a parent of that class?

Thank you very much. I appreciate the help. 🙂

enter image description here



Answers 1


It looks like the presenter is using the P5.js library https://p5js.org/ and the position function is part of that.

you can see its part of the p5.Element class

p5.Element.prototype.position = function() {
  if (arguments.length === 0) {
    return { x: this.elt.offsetLeft, y: this.elt.offsetTop };
  } else {
    this.elt.style.position = 'absolute';
    this.elt.style.left = arguments[0] + 'px';
    this.elt.style.top = arguments[1] + 'px';
    this.x = arguments[0];
    this.y = arguments[1];
    return this;
  }
};

https://github.com/processing/p5.js/blob/master/src/dom/dom.js

Ewan
Ewan
August 14, 2019 11:01 AM

Related Questions


Best practice to callbacks in OOP (JavaScript)?

Updated June 21, 2017 12:05 PM

Unable to solve mystery of functions in Javascript

Updated April 19, 2018 13:05 PM


Class definitions in static getter methods

Updated May 25, 2018 10:05 AM