Roshani Desai

   👉 Javascript with OOPs (Inheritance) In Javascript, Inheritance is done using prototype object. A prototype object is an object pointing to another object. We don't have a direct inheritance in Javascript, we can mimic inheritance using prototype. Let's say, we have one more class that inherits from Customer, and it submits to Server2. function CustomerChild(){         this.submit = function() {         alert ("this submits the data to Server2" + " "      +  this.CustomerName + " "                                       + this.CustomerCode");   }}             CustomerChild.prototype = new Customer(); var cust = new Customer(); cust.CustomerName ("John"); cust.Submit();  --this is a call to the submit method of the Customer class.  cust = new CustomerChild(); cust.CustomerName ("John"); cust.Submit();  --this is a call to the submit method of the CustomerChild class.  We don't have the "Protected" keyword in

    👉 Javascript with OOPs (Abstraction and Encapsulation) Abstraction is showing what's necessary and Encapsulation is hiding the complexity. For ex, if we are making calls to the server, we may have methods like: this.CreateConnection = function() {} this.CreateHttpObject = function() {} Showing these methods to the user who is using this component may increase the complexity of the component. User may have to call          cust.CreateConnection();          cust. CreateHttpObject();          cust.Submit(); So  CreateConnection and CreateHttpObject has to be private, but the time you declare the methods using "this" keyword, it becomes public. Below example solves this problem by creating private functions. If user makes a call to CreateConnection or CreateHttpObject, he will  receive "Not Found" error. *Create private methods function Customer(){        function CreateConnection() {};       function CreateHttpObject () {};       this.submit = function() {    

    👉 Javascript with OOPs New javascript specification ES6 introduced "Javascript classes" though it uses "function" internally,  previous frameworks don't allow the "class" keyword, and the below example creates a class using Javascript functions. *Create class and object function Customer(){ //class template } var cust = new Customer(); //object *Create Method and Properties function Customer(){        this.CustomerName = "";       this.CustomerCode = "";       this.submit = function() {            alert("Submit" + this.CustomerName + " " +                       this.CustomerCode); } var cust = new Customer();  cust.CustomerName = "John"; cust.CustomerCode = "1001"; cust.Submit(); The above example defines only variables, which are not secure and not good for developing business components. To define properties in javascript, we don't have direct "getter" and "setter&quo

  👉 Unobtrusive Javascript In web pages, we have presentation and behavior. Presentation is controlled by HTML and behavior is controlled by javascript. <input type = "button" onclick = "Fun1();" id = btn1/> <script language = javascript>              Function Fun1()                       {alert ("Hi");} </script> Here, button is tightly linked with the behavior. Unobtrusive javascript seperates presentation from behavior, making HTML more sleek. <input type = "button"  id = btn1/> <script src = "jscript1.js" type = "text/ javascript"> </script> code of jscript1.js file: <script language = "javascript">            Function Fun1() {                      alert("Hi");             } var e1 = document.getElementByID("btn1"); e1.onclick = Fun1(); </script> As shown in the above example, using unobtrusive javascript, we will be able to change button's

👉 Classes ✅Classes are functions To create a class in javascript, function has to be created. Though new javascript specifications introduced "class" keyword, it uses function internally. We can also create properties and methods within class. function customer ({               this.CustomerCode = "1001";             this.CustomerName = "John";             this.getFullDetails = function(){                   return this.CustomerCode + " " +                                         this.CustomerName";             } }) This is the basic syntax of class and it doesn't respect OOPs principles. Variables are attached to the windows object, hence the properties are global not private.

  👉 "this" keyword ✅Use of "this" keyword Syntax - this.x = 10; Basically, DOM hierarchy gets created as shown above and Javascript has access to this DOM hierarchy. When the browser parses HTML, it creates a DOM inside it. On the top, there is a window object, inside window, document gets created and finally, form gets generated within document. "this" refers to the top window object of your browser. When you create any type of variable or object in javascript, it gets attached to the window object. var x = 10; alert(window.x); alert(this.x);   //Both alerts refer to the same variable and display the same output.