This lesson shows how to chain object methods in JavaScript.
With the help of method chaining we can call more than one method or function of the object in a single instruction.

object.method_1().method_2()
The way to chain method invocations is to define the methods (functions) with the special word this (to can be accessed outside), and to return the object instance in the code of the previous method (method_1() ).
• Syntax:
var className = function() {
  var thisob = this;      // to store the object instance

  this.method_1 = function(){
    // some JavaScript code

    return thisob;     // returns object instance
  }

  this.method_2 = function(){
    // JavaScript instructions
  }
}
- Here is an example, a JavaScript object used to calculate the area and perimeter of rectangle (see the comments in code, and test it yourself).
<script>
var Rectangle = function() {
  var thisob = this;      // to store the object instance
  var a = 0;
  var b = 0;

  // sets a and b values
  this.setAB = function(a1, b1){
    a = a1;
    b = b1;

    return thisob;     // returns object instance
  }

  // returns rectangle area
  this.area = function(){
    return a * b;
  }

  // returns rectangle perimeter
  this.perimeter = function(){
    return 2 * (a + b);
  }
}

// creates an object instance of the class
var obR = new Rectangle();

// sets the values and gets the area and perimeter
var area = obR.setAB(7, 8).area();
var perimeter = obR.setAB(7, 8).perimeter();

// test
alert('Area = '+ area +'\nPerimeter = '+ perimeter);
</script>

• You can chain more than two methods, the technique is the same, the public methods (that can be accessed outside) must be defined with the special word "this", and all the previous methods must return the object instance.
- Here is an example that chains three methods. A JavaScript object used to define HTML tag with ID, CSS class, and content (study the code and test it yourself).
<script>
var setTag = function() {
  var thisob = this;      // to store the object instance
  var id = '';            // tag id attribute
  var cls = '';           // tag class attribute

  // sets id
  this.setId = function(id1){
    id = ' id="'+ id1 +'"';

    return thisob;     // returns object instance
  }

  // sets class attribute
  this.setClass = function(cls1){
    cls = ' class="'+ cls1 +'"';

    return thisob;     // returns object instance
  }

  // returns the HTML tag and its content
  this.getTagCnt = function(tag, cnt){
    return '<'+ tag + id + cls +'>'+ cnt +'</'+ tag+ '>';
  }
}

// creates an object instance of the class
var obTag = new setTag();

// variables with tag type and content
var tag = 'div';
var cnt = 'http://coursesweb.net';

// chains methods to set ID, Class, and gets HTML <div> tag with these attributes and content in a single instruction
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);

// test
alert(getTag);       // <div id="some_id" class="a_class">http://coursesweb.net</div>
</script>
The instruction that chains the methods in the code above:
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);
It is the same with this:
// sets ID and css class, then gets the HTML tag with content
obTag.setId('some_id');
obTag.setClass('a_class');
var getTag = obTag.getTagCnt(tag, cnt);

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
JavaScript Object Method Chaining

Last accessed pages

  1. Bubble Tanks 3 (15752)
  2. PHP OOP - Constructor Method (3127)
  3. SSEP - Site Search Engine PHP-Ajax (4261)
  4. Super Dragon Mahjongg (534)
  5. The Rise Of Atlantis (94)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (45775)
  2. Read Excel file data in PHP - PhpExcelReader (34434)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34319)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (30908)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28149)