Newest âź· Oldest
  1. Snapshot at 2017-04-24

    Lecture 3—Functions and Events Handling

    This is lecture 3 of the Beginning jQuery course. In this lecture, we focus on the JavaScript function and jQuery events handling methods.

    If you come across any questions, feel free use the chat to ask me.

    Understanding Function

    If you’re new to JavaScript function, I suggest to get started reading the reference from Mozilla Developer Network.

    After you understand the function, I recommend reading this chapter from the Eloquent JavaScript book.

    Understanding the this in JavaScript

    When we are inside a function, sometime we may want to refer to the current context by using the special variable this. But what is the thisactually pointing to?

    A simple rule is JavaScript’s this refers to the one that calls the function. For example:

    function foo() {
  console.log(this);
}
window.foo(); // `this` refers to window.
var objectA = {
  hello: function(){
    console.log(this);
  }
};
objectA.hello(); // `this` refers to `objectA`.
objectA.hello.call(window); // ** `this` refers to `window`.
$('#input').keydown(function(){
  console.log(this);  // `this` refers to the $('#input').
});

    ** Note that we can use the call or apply method to change the context of any function calling

    In other common object-oriented language, this ofter refers to the same instance. In JavaScript, the this refers to the context that calls that function.

    Please make sure you read the Mozilla Developer Network’s this reference and understand the detail on how this works.

    Advance: Object and Prototype

    Once you fully understand how function works, I recommend reading the Object chapter from the Eloquent JavaScript book. It shows you how we can manage objects in object oriented way.

    Event handling

    Handling events is one of the most common tasks when writing jQuery. We often need to respond to user’s actions and provide appropriate feedbacks. The following jQuery’s events handling documentation provides a getting started guide.

    http://learn.jquery.com/events/handling-events/

    Delegation

    The delegate method.

    http://api.jquery.com/live/

    http://api.jquery.com/delegate/

    Looping with jQuery each

    In some cases, we need to loop through all the selected elements and apply logic on it. We can use the each method.

    Usage example:

    $('selector').each(function(){
  // each of the matched element
  $(this).something();
});

    Setting and Getting HTML attributes

    There are prop and attr methods. Both methods access the attribute of the selected HTML tag. We prefer prop most of the time, as explained in this StackOverflow answer

    Example—Inputing multiple names

    Screenshot of the example

    I created an example that demonstrates the techniques listed in this lecture. It is a list of inputs that user input names into it. User can add more inputs by clicking the “+” button. There is a confirmation dialog when submitting the form.

    http://codepen.io/makzan/pen/vEQddR

    Summary

    After going through the links and code examples listed in this lecture, you should be able to handle different events.

    —Thomas Mak

  2. Snapshot at 2017-04-02

    📖 Lecture 3—Functions and Events Handling

    This is lecture 3 of the Beginning jQuery course. In this lecture, we focus on the JavaScript function and jQuery events handling methods.

    If you come across any questions, feel free use the chat to ask me.

    Understanding Function

    If you’re new to JavaScript function, I suggest to get started reading the reference from Mozilla Developer Network.

    After you understand the function, I recommend reading this chapter from the Eloquent JavaScript book.

    Understanding the this in JavaScript

    When we are inside a function, sometime we may want to refer to the current context by using the special variable this. But what is the thisactually pointing to?

    A simple rule is JavaScript’s this refers to the one that calls the function. For example:

    function foo() {
  console.log(this);
}
window.foo(); // `this` refers to window.
var objectA = {
  hello: function(){
    console.log(this);
  }
};
objectA.hello(); // `this` refers to `objectA`.
objectA.hello.call(window); // ** `this` refers to `window`.
$('#input').keydown(function(){
  console.log(this);  // `this` refers to the $('#input').
});

    ** Note that we can use the call or apply method to change the context of any function calling

    In other common object-oriented language, this ofter refers to the same instance. In JavaScript, the this refers to the context that calls that function.

    Please make sure you read the Mozilla Developer Network’s this reference and understand the detail on how this works.

    Advance: Object and Prototype

    Once you fully understand how function works, I recommend reading the Object chapter from the Eloquent JavaScript book. It shows you how we can manage objects in object oriented way.

    Event handling

    Handling events is one of the most common tasks when writing jQuery. We often need to respond to user’s actions and provide appropriate feedbacks. The following jQuery’s events handling documentation provides a getting started guide.

    http://learn.jquery.com/events/handling-events/

    Delegation

    The delegate method.

    http://api.jquery.com/live/

    http://api.jquery.com/delegate/

    Looping with jQuery each

    In some cases, we need to loop through all the selected elements and apply logic on it. We can use the each method.

    Usage example:

    $('selector').each(function(){
  // each of the matched element
  $(this).something();
});

    Setting and Getting HTML attributes

    There are prop and attr methods. Both methods access the attribute of the selected HTML tag. We prefer prop most of the time, as explained in this StackOverflow answer

    Example—Inputing multiple names

    Screenshot of the example

    I created an example that demonstrates the techniques listed in this lecture. It is a list of inputs that user input names into it. User can add more inputs by clicking the “+” button. There is a confirmation dialog when submitting the form.

    http://codepen.io/makzan/pen/vEQddR

    Summary

    After going through the links and code examples listed in this lecture, you should be able to handle different events.

    —Thomas Mak