Let’s learn JS! Reading the “JS Good Parts book”

I’ve decided to start learning Javascript because I want understand how it works.

Let’s start with Functions:

Function invocation:

In addition to the declared parameters, every function receives two additional parameters: this and arguments. The this parameter is very important in object oriented programming, and its value is determined by the invocation pattern. 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.

Note: if too many or too little parameters passed to function they will be ignored or set to undefined. There is no type checking. Also this will not throw any runtime errors.

1.Method invocation pattern

// Create myObject. It has a value and an increment
// method. The increment method takes an optional
// parameter. If the argument is not a number, then 1
// is used as the default.
var myObject = {
value: 0,
increment: function (inc) {
this.value += typeof inc === ‘number’ ? inc : 1;
}
};
myObject.increment( );
document.writeln(myObject.value); // 1
myObject.increment(2);
document.writeln(myObject.value); // 3

2. Function invocation pattern

 

3. Constructor invocation pattern

 

4. Apply invocation pattern

 

Advertisements

2 ways of binding data to JSP

There are 2 ways of binding data to the JSP.

  1. Using JSTL. JSTL can help to retrieve the data from the server and populate it in the JSP. But the issue is that we can’t dynamically add the html elements inside the JSP.
  2. Using Handlebars. We can get the data from ajax calls inside the JS, then add it to handlebar then append the handlebar to JSP. This way allows us to add multiple elements and make the page dynamic. Remember to compile the handlebar inside the JS

 

tags: jsp, javascript, jsp data binding

JS: function inside () followed by (). ~ inside the if statment

if the function is inside the () and followed by () ex:

( fucntion(){

})

()

This means that we declared the function and run it immediately

~ inside if statement means “not”, and works similar to !. ex:
if(~tagsArray.indexOf(item)) {

something;
}

means if no items inside the array do something

JS lesson 2: CSS pseudo class

We can use CSS pseudo class to select items we need.

<select>
<optgroup>
<option selected>1</option>
<option>2</option>
<option>3</option>
</optgroup>
</select>
select option:selected === select > optgroup > option:selected

select option:myproperty  // this is wrong

Javascrint and Jquery way of finding elements
select option:first-child === $(select).find(option).first();
select option:last-child === $(select).find(option).first();

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

How to test your Ajax call using JSP

If you building the web app and want to test your Ajax call by calling the controller here is the snippet you can use.

$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL"
}).done(function(data) {
console.log(data);
});
});
  1. place the snippet inside the tag inside JSP
  2. in chrome press F12 for developer tools in chrome.
  3. navigate to console tab
  4. in browser navigate to JSP with snippet code.

 

Alternatively, you can view the navigation tab inside the developer tools and see your ajax request and response from controller.

Sweetness of this approach compared to Postman, is that you don’t need to provide all the authorization details.

Note: for testing purpose change your controller to GET method

Note 2: great article to learn about Ajax methods:

https://learn.jquery.com/ajax/jquery-ajax-methods/

Also if you need to pass data to your controller you can use bellow snippet. It returns json, of course your controller must return json too.


var data = {some data you need for your controller ex. id}
$(document).ready(function() {
$.ajax({
type: "GET", 
url: "/YourControllerURL",
contentType: "application/json",
dataType: "json",
data:data
}).done(function (nameOfJsonControllerReturns){ 

console.log(nameOfJsonControllerReturns.data); 

}); 
}); 

Steps to follow after adding new column to table

To add new column to table follow this steps:

  1. write the sql statement
  2. test it in workbench
  3. add it to sprint x->new.sql
  4. add the rollback statement that removes the column to sprint x->rollback.sql
  5. edit the corresponding XXX_init.sql, so that once init runs, it will not be confused with new column

Small hint:

How to copy data from one column to another:

update TABLE set destinationColumn=copyFromColumn;

for this to work remove the safe update from workbench settings.

Edit->Preferences->SQL editor, untick safe updates, reconnect to db