Object in JavaScript (Event handling intro): JS

What is an Object in JavaScript?

Object is popular data type in javascript.Var can contain single value like :

var address = 'Kathmandu'

but object can contain multiple values.
The values are written as name : value pairs (name and value separated by a colon).

Objects in JavaScript can be created several different ways.

    var person = {
         zone:"bagmati",
         district:"Bardiya",
         muncipality:'kapan',
         tol:"namuna tol"
    };

we can also create object with

var address = new Object();
address.zone = "bagmati";
address.district = "Bardiya";
address.municpality = 'kapan';
address.tol = "namuna tol";

always remember
var x = address;
this will not create new object rather both x and address are same object.

object.prop will access the value of object.

for example,

<p id="demo"></p>

<script>
var address = {zone:"bagmati", district:"Bardiya", muncipality:'kapan', tol:"namuna tol"};
document.getElementById("demo").innerHTML = address.tol + " is in  " + address.zone + " zone  and "+ address.district + "district ";
</script>

Output will be :

Namuna tol is in Bagmati zone and Bardiya district

The block of code inside of the for...in loop will be executed once for each property.

var address = {zone:"bagmati", district:"Bardiya", muncipality:'kapan', tol:"namuna tol"};
for (x in address) {
  result += address[x];
}

document.getElementById("demo").innerHTML = result;

object can have method as its member

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();

output will be:

 John Doe

In a function definition, this refers to the "owner" of the function.

In the example above, this is the person object that "owns" the fullName function.

In other words, this.firstName means the firstName property of this object.

If a function is not a method of a JavaScript object, it is a function of the global object.

The call() method is a predefined JavaScript method.

With call() an object can use a method belonging to another object.
It can be used to invoke (call) a method with an owner object as an argument (parameter).

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
person.fullName.call(person1);

Next thing is Event and Event Handling :

The interaction of JavaScript with HTML is handled through events. Events are actions that occur when either the user or the browser itself manipulates the page.
An event is fired whenever an action occurs on a page which JavaScript can react to, such as when user clicks on a button (click event) or presses a key (keypress event).
An event handler is a JavaScript function that runs when an event fires.
An event listener attaches responsiveness to a given element, which allows the element to wait or “listen” for the given event to fire.
Events can be assigned to elements via inline event handlers, event handler properties & event listeners. Let’s take a look at each of these methods.

inline method is :

<button onclick="document.getElementById('demo').innerHTML = Date()">
The time is?
</button>

JS code is usually long so writting more managable code here we put the event listener task inside a function.

<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<p id="demo"></p>

// Function to modify the text content of the paragraph
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

1 more thing (BONUS):

what is let in js :

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

why do we have let in js when we already have var ?

The answer is scoping and Reference error in the code above is proof of that .

If you have any problem on understanding it , mail me at [e-mail] .I will cover scoping of variables in another article. Since, we are here for react, i suppose u guys can do research on your own and get into track for React soon !!! Good luck !!!!