JS lesson 1: var self=this, $.extend, CSS selector

var self=this;

In JS ‘this’ refers to current object where it’s used. However, sometimes we want to use objects that are outside scope. In below example we will do just that:

Note: self is being used in manner of pointer to object that we need

var userItem = {
name: “Yan”,
init: function() {
var self = this; // this == userItem;
$(“#btn”).on(“click”, function(event) {
alert(this.name); // error: this == btn
alert(self.name); // self.name == btn
});
}
};
userItem.init();

JQuery $.extend

$.extend is used to clone add one object to another. This provides sort of expanding the target object with other object.

Object a:

var user = {
name: “Yan”,
address: “Clementi”
}

Object b:

var engineer = $.extent({}, user, {
level: “beginner”
});

Note: engineer now will have it’s on fields and fields from user.

Note2: $.extent({}, user, {——}); means that everything inside {——} and user will be cloned to empty object {} , later it will be assigned to engineer

engineer == {
name: “Yan”,
address: “Clementi”,
level: “beginner”
}

Note 3:  if we don’t use {} but use some other object, new object will be overwritten, see example below:

var manager = $.extent(user, engineer , {
salary: “1”
});

manager == user     // true

Note4: since JQuery api for $.extend overwrites the target, in our case it’s user here, then when we compare user==manager it’s true, because we assigned user with new fields to manager. https://api.jquery.com/jquery.extend/

 CSS selector

<X div class=”question question-enhanced another-class”>
    <X div class=”body”>
       <X div class=”options”>
           <X div id = #1 class=”option”>
           </div>
       </div>
   </div>
</div>
<X div class=”question”>
   <X div class=”body”>
      <X div id = #2 class=”option”>
      </div>
   </div>
</div>

Example1:   .question .body .option (e.g. .option) == #1 and #2
Example2:   .question > .body > .option == #2
Example3:   .question.question-enhanced .body

Note that there is space before . and another version doesn’t have space.
If there is space it means that class are on the same level, but if got no space before . means it belongs to that class. Here is the example

.question.question-enhanced .body          represents

<X div class=”question question-enhanced body”>

.question.question-enhanced.body             represents

<X div class=”question question-enhanced”>

<X div class=”<body”>  </div> </div>

https://www.w3schools.com/cssref/css_selectors.asp

#id   – selects specific id
.class  – selects specific class

Reflection and Prototyping in JS

Prototyping in java script is nothing but act as an Java Interface. Meaning it’s used to define the methods of the object.

 

 

Reflection in java script is used to observe the content of the object. As for modification we can use method expansion:

ex.:

<p style=”line-height: 18px; font-size: 18px; font-family: times;”>
Click “<i>Load samples</i>” to view and edit more JS samples.<br>

function display(p) {

if (p.hasOwnProperty(‘name’)) {
p.name.lastname = ‘Terry’;
alert(p.name.firstname);
}
}

var person = { combinedname: { fistname: ‘John’ }};
display(person);

</p>

Interesting things about JavaScript

1. If we assign value to an object’s property that doesn’t exist, then it the object itself will be augmented and property will be added

ex.:  stooge[‘first-name’] = ‘Jerome’;

2.  Functions can be passed as arguments to functions, and functions can be returned from functions. Also, since functions are objects, functions can have methods.

3.  An inner function also enjoys access to the parameters and variables of the functions it is nested within.

4.  In addition to the declared parameters, every function receives two additional parameters: this and arguments

5.  A function always returns a value. If the return value is not specified, then undefined
is returned

 

Function Invocation:

There are four patterns of invocation in JavaScript: the method invocation pattern, the function invocation pattern, the constructor invocation pattern, and the apply invocation pattern. The patterns differ in how the bonus parameter this is initialized.

Static method

One rule-of-thumb: ask yourself “does it make sense to call this method, even if no Obj has been constructed yet?” If so, it should definitely be static.

So in a class Car you might have a method double convertMpgToKpl(double mpg) which would be static, because one might want to know what 35mpg converts to, even if nobody has ever built a Car. But void setMileage(double mpg) (which sets the efficiency of one particular Car) can’t be static since it’s inconceivable to call the method before any Car has been constructed.