Using the constructor method

class Person {

  constructor(name) {
    this.name = name;
  }

  introduce() {
    console.log(`Hello, my name is ${this.name}`);
  }

}

const otto = new Person('Otto');

otto.introduce();

If you don’t provide your own constructor, then a default constructor will be supplied for you. If your class is a base class, the default constructor is empty:

constructor() {}

If your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided:

constructor(...args) {
  super(...args);
}

Just as a reminder: the super keyword is used to access and call functions on an object’s parent (more information here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)

Look at these other resources on Javascript constructor:

https://stackoverflow.com/questions/61213185/javascript-equivalent-to-php-construct

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

The.position() method get only “top,left” values relative to the parent, but it doesn’t set any values, so the following code doesn’t work:

$("#mydiv").css({top: 200, left: 200});

Instead, to set the position relative to the parent, we need to set the position:relative of parent and position:absolute of the element, like in the following piece of code:

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});

This works because position: absolute; positions relatively to the closest positioned parent (the closest parent with any position property other than the default static).

Just a reminder: set values correctly in jQuery!

In jQuery if the value passed is a string type, it must be followed by ‘px’ (i.e. ’90px’), where if the value is an integer, it will append the px automatically. The width and height properties are more forgiving (either type works). These are the main differences in the jQuery:

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } ); //does NOT work!
$(selector).css( { left: x + "px", top: y + "px" } ); //does work!

x = 90;
y = 120;
$(selector).css( { left: x, top: y } ); //does work!

Have fun in jQuery!

to recognize a data type ‘object’ from ‘array’, you need a specialized function like this…
[sourcecode language=”javascript”]
function isArray(value){
var b = typeof value;
if(b === ‘object’){
if(value){
b = (typeof value.length === ‘number’ &&
!(value.propertyIsEnumerable(‘length’)) &&
typeof value.splice === ‘function’) ? true : false;
}else{
b = false;
};
};
return b;
};
var myarray = [1, 2, 3];
var myobject = { key: ‘value’ };
alert(isArray(myarray)); //return true
alert(isArray(myobject)); //return false
[/sourcecode]

Good work!
Max 🙂

[sourcecode language=”javascript”]
function stringify(object, padding, margin){
var o = (typeof object == ‘object’ || typeof object == ‘function’) && object != null ? object : null;
var p = typeof padding == ‘boolean’ && padding ? true : false;
var m = typeof margin == ‘number’ && margin>0 && p ? margin : 0;
if(o != null){
var s = ”;
var a = function(o){return (typeof o === ‘object’ && o ? ((typeof o.length === ‘number’ &&!(o.propertyIsEnumerable(‘length’)) && typeof o.splice === ‘function’) ? true : false) : false);}; //is array?
for(var v in o){
s += typeof o[v] === ‘object’ ? (o[v] ? (
(typeof o[v].length === ‘number’ && !(o[v].propertyIsEnumerable(‘length’)) && typeof o[v].splice === ‘function’) ?
(m>0 ? Array(m).join(‘ ‘):”) + v + ‘:’ + (p ? ‘ ‘:”) + ‘[‘ + (p ? ‘rn’:”) + stringify(o[v],p,(m>0?m:1)+v.length+4) + (p!=true ? ” : ‘rn’ + Array((m>0?m:1)+v.length+2).join(‘ ‘)) + ‘],’ + (p ? ‘rn’:”) :
(m>0 ? Array(m).join(‘ ‘):”) + v + ‘:’ + (p ? ‘ ‘:”) + ‘{‘ + (p ? ‘rn’:”) + stringify(o[v],p,(m>0?m:1)+v.length+4) + (p!=true ? ” : ‘rn’ + Array((m>0?m:1)+v.length+2).join(‘ ‘)) + ‘},’ + (p ? ‘rn’:”)
) : (m>0 ? Array(m).join(‘ ‘):”) + v + ‘:’ + (p ? ‘ ‘:”) + o[v] + ‘,’ + (p ? ‘rn’:”))
: (m>0 ? Array(m).join(‘ ‘):”) + v + ‘:’ + (p ? ‘ ‘:”) + (typeof o[v] == ‘string’ ? ”’ + o[v].replace(/’/g,’\”) + ”’ : o[v]) + ‘,’ + (p ? ‘rn’:”);
};
o = s.length>0 && p!=true ? s.substring(0, s.length-1) : (s.length>2 ? s.substring(0, s.length-3) : s);
}else{
o = object;
};
return o;
};
[/sourcecode]

a little example, you declare same variable….

[sourcecode language=”javascript”]
var associative_array = new Array();
associative_array[‘one’] = 1;
associative_array[‘two’] = 2;
associative_array[‘undefinedvar’];

var myobject = {
mystring: ‘value’,
myquoted: ‘string with ‘single quotation mark”,
mynumber: 1,
myboolean: true,
myarray: [1, 2, 3],
myassocarray: associative_array,
myobject: {
obj_string: ‘hi!’,
obj_number: 1,
obj_array: [
‘just’, ‘a’, ‘test’, 1, false,
[‘array’, ‘inside’, ‘array’],
{
object: ‘inside array’,
array: [1,2,3,4,5,6,7,8,9]
},

]
},
mynullvalue: null,
myundefined: associative_array[‘undefinedvar’],
myfunction: function(){ var s = ‘hello!’; return s; }
};
[/sourcecode]

then, for an inline stringification, you can use

[sourcecode language=”javascript”]
var str = stringify(myobject);
[/sourcecode]

and “str” value will be a string as

[sourcecode language=”javascript”]
mystring:’value’,myquoted:’string with ‘single quotation mark”,mynumber:1,myboolean:true,myarray:[0:1,1:2,2:3],myassocarray:[one:1,two:2],myobject:{obj_string:’hi!’,obj_number:1,obj_array:[0:’just’,1:’a’,2:’test’,3:1,4:false,5:[0:’array’,1:’inside’,2:’array’],6:{object:’inside array’,array:[0:1,1:2,2:3,3:4,4:5,5:6,6:7,7:8,8:9]}]},mynullvalue:null,myundefined:undefined,myfunction:function () {
var s = "hello!";
return s;
}
[/sourcecode]

Instead, for a stringification with a well formatted padding, you can use

[sourcecode language=”javascript”]
var str_formatted = stringify(myobject, true);
[/sourcecode]

and this is the “str_formatted” value:

[sourcecode language=”javascript”]
mystring: ‘value’,
myquoted: ‘string with ‘single quotation mark”,
mynumber: 1,
myboolean: true,
myarray: [
0: 1,
1: 2,
2: 3
],
myassocarray: [
one: 1,
two: 2
],
myobject: {
obj_string: ‘hi!’,
obj_number: 1,
obj_array: [
0: ‘just’,
1: ‘a’,
2: ‘test’,
3: 1,
4: false,
5: [
0: ‘array’,
1: ‘inside’,
2: ‘array’
],
6: {
object: ‘inside array’,
array: [
0: 1,
1: 2,
2: 3,
3: 4,
4: 5,
5: 6,
6: 7,
7: 8,
8: 9
]
}
]
},
mynullvalue: null,
myundefined: undefined,
myfunction: function () {
var s = "hello!";
return s;
}
[/sourcecode]

Finally, when you pass a variable to stringify() that is not an object, it will just return the value.

Happy stringifications!

Max 🙂