Javascript: Tips and tricks

Query selector

This return first element which has class=”test” and changes its css display to none.

document.querySelector('.test').style.display = 'none';

getElementById

This return element which has id=”test”. It is faster than querySelector.

document.getElementById('test').style.display = 'none';

Event listener

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

function callback() {
	//do something	
}

document.querySelector('.test').addEventListener('click', callback);

or we can do the same with anonymous function (because this function will be used only in this one case)

document.querySelector('.another-test').addEventListener('click', function() { 
   //do something here
});

Objects

Instantiation and inheritance All methods which we want to be inherited, we put in prototype property. Putting it directly into Person object isnt good idea, because then each object will have this function, which isnt effective.

var Person = function(name, yearOfBirth, job) {
	this.name = name;
	this.yearOfBirth = yearOfBirth;
	this.job = job;
}

Person.prototype.calculateAge = function() {
	console.log(2018 - this.yearOfBirth);
}

var john = new Person('john', 1990, 'teacher');
john.calculateAge();