Javascript Study Note

Javascript Language Concepts

Callback function basic

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern.

//Note that the item in the click method's parameter is a function, not a variable.​
​//The item is a callback function
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

Problem When Using Methods With The this Object as Callbacks

When the callback function is a method that uses the this object, we have to modify how we execute the callback function to preserve the this object context. Or else the this object will either point to the global window object (in the browser), if callback was passed to a global function. Or it will point to the object of the containing method.Let’s explore this in code:

// Define an object with some properties and a method​
​// We will later pass the method as a callback function to another function​
​var clientData = {
    id: 094545,
    fullName: "Not Set",
    // setUserName is a method on the clientData object​
    setUserName: function (firstName, lastName)  {
        // this refers to the fullName property in this object​
      this.fullName = firstName + " " + lastName;
    }
}
​
​function getUserInput(firstName, lastName, callback)  {
    // Do other stuff to validate firstName/lastName here​
​
    // Now save the names​
    callback (firstName, lastName);
}

getUserInput ("Barack", "Obama", clientData.setUserName);
​
console.log (clientData.fullName);// Not Set​
​
​// The fullName property was initialized on the window object​
console.log (window.fullName); // Barack Obama

The correct way:

//Note that we have added an extra parameter for the callback object, called "callbackObj"​
​function getUserInput(firstName, lastName, callback, callbackObj)  {
    // Do other stuff to validate name here​
​
    // The use of the Apply function below will set the this object to be callbackObj​
    callback.apply (callbackObj, [firstName, lastName]);
}
​
// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object​

getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
​
​// the fullName property on the clientData was correctly set​
console.log (clientData.fullName); // Barack Obama

Note the following ways we frequently use callback functions in JavaScript, especially in modern web application development, in libraries, and in frameworks:

• For asynchronous execution (such as reading files, and making HTTP requests)
• In Event Listeners/Handlers
• In setTimeout and setInterval methods
• For Generalization: code conciseness

---

Prototype

http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/

---

JavaScript FrameWork

AngularJS

REACT

JQuery

• JQuery selector

• Action

  • The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
  • Basic syntax is: $(selector).action()**

• Event

  • In jQuery, most DOM events have an equivalent jQuery method.
  • I personally feel the event and action are different. But W3school seems to mix them together.
  • For example, I consider