javascript's - this keyword, getters & setters, Dom box dimension properties

 JavaScript

Today’s topic - this keyword, Getters & Setters, 

Dom box dimension properties.



This keyword

this keyword’s  simple description would be it refers to the object in which it is used.


this can give different values based on where it has been used.


Global context -

In global context  i.e used outside of any function this will refer to the global object.


this in a global context.



Function context -

When this keyword is used in the function in non strict mode this will refer to the global object .


this in a function context.



Function context (“strict mode”) -

When  this keyword is used in the function context in strict mode this will be undefined.


this in a function context using strict mode.




Method context -

While used in method context this refers to the owner of the method in which it is used.


this in a method context.




Event context - 

When used in an event context this will refer to the element by which the event is called.



this in an event context.




Getters and Setters 

There are two kinds of object properties, we all basically know the first one which are data properties all of you guys used until now was data properties.

The second type are the getters and setters; they are something new. getters and setters were introduced in ES5 in 2009.

They are basically functions which execute on getting or setting some value.



Getter - 

The get syntax binds an object property to the function that will be called automatically when the property is looked up.


Getter.


Setter - 

The set syntax binds an object property to function to be called when the object property is set. When the property is set the function is automatically called.

Setter. 



Dom box dimension properties

  • Element.getBoundingClientRect() - returns a number of coordinates and size of the window.


  • Element.offSetTop() - returns a number of “X” coordinate.


  • Element.offSetLeft() - returns a number of is basically “Y” coordinate.


  • Element.clientTop() - returns a number of the width of the top border of the element.


  • Element.clientLeft() - returns a number of the width of the left border of the element.


  • Element.offsetWidth() & Element.offsetHeight - returns a number of the total width and height of the element.


  • Element.clientHeight() & Element.clientWidth() - returns a number of the inner height and width of the  element.


  • Element.scrollHeight() - Returns a number representing the scroll view height of an element.

  • Element.scrollTop() - A number representing the number of pixels the top of the document is scrolled vertically.


Note: For a deeper dive you can check out MDN.

Dom box dimension chart. 


Summary

  • this refers to the object it belongs to and can give different values based on where it has been used.

  • The get binds an object property to the function which will be called when the object property is looked up.

  • the set syntax binds an object property to function to be called when the object property is set. 



That's all for today, Hope you learned something.

have a beautiful day ❤

Comments

Post a Comment

Popular posts from this blog

javaScript's - inheritance, super keyword, new keyword

Image
JavaScript’s (OOJS) Today’s topic - Inheritance, Super keyword, New keyword. Inheritance -  Inheritance basically means to create a child class which has access to a parent class or base class. The child class inherits all the methods from its parent class.  To create a class inheritance we use the Extends keyword. Inheritance is basically great for code reusability.  WHY? Because  you can use the properties and methods of the parent class in the child class. Super keyword -  So basically the super() keyword is only available to classes. The super() always refers to the parent class constructor. By calling the super() method in the constructor of the child class you call the parent class constructor and get access to parent properties and methods. If there is a constructor in the child class the super() method should be used before this() keyword otherwise it will cause a reference error. New keyword -   The new keyword is basically used to create an i...
Read more

JavaScript - Arrays

Image
  JavaScript Arrays Today’s topic JavaScript arrays and some of its most used methods. What are Arrays ?  Arrays re used to store more than one value at a time Arrays are special variables.  Syntax: const array_name = [ n 0 , n 1 , n 2 , n 3 , n n ]; Eg: This is the basic way for creating an array.  Types of arrays (1) Uniform -  An array which has a single type of data. Eg - Uniform array. (2) Un uniform - An array which has multiple types of data. Eg - Un uniform array. (2) Dimensional Array - A simple description would be the 2D Array are Arrays of Arrays.  Eg - 2D array. The Array.from( ) :   It takes an array-like object & turns it into a complete array, or you can say does a shallow copy. In which you can perform all array functions.  Syntax : Array from (arrayLike, mapfn, thisarg)  arrayLike An array-like or iterable object to convert to an array . mapFn Optional Map function to call on every element of the array . thisArg ...
Read more