Friday, September 14, 2018

How to get the value from the GET parameters?

JavaScript itself has nothing built in for handling query string parameters.
In a (modern) browser you can use the URL object;
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

For older browsers (including Internet Explorer), you can use this polyfill or the code from the original version of this answer that predates URL:
You could access location.search, which would give you from the ? character on to the end of the URL or the start of the fragment identifier (#foo), whichever comes first.
Then you can parse it with this:
function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);
You can get the query string from the URL of the current page with:
var query = window.location.search.substring(1);
var qs = parse_query_string(query);

Monday, September 10, 2018

Tạo và xử lý event:

Muốn tạo transition và animation với JS thì phải tạo và xử lý event. Trong hàm xử lý event làm thay đổi các thuộc tính của các element

//tạo event
var event = new Event('build');

// gửi event
document.dispatchEvent(event);

// lắng nghe xem có event, nếu có sẽ gọi hàm xử lý
document.addEventListener('build', function (e) { /* ... */ }, false); 

Tuesday, September 4, 2018

Loop through an array in JavaScript

Use a sequential for loop:
var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}
@zipcodeman suggests the use of the for...in statement, but for iterating arrays for-in should be avoided, that statement is meant to enumerate object properties.
It shouldn't be used for array-like objects because:
  • The order of iteration is not guaranteed, the array indexes may not be visited in numeric order.
  • Inherited properties are also enumerated.
The second point is that it can give you a lot of problems, for example, if you extend the Array.prototype object to include a method there, that property will be also enumerated.
For example:
Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}
The above code will alert, "a", "b", "c" and "foo!".
That be particularly a problem if you use some library that relies heavily on native prototypes augmention (such as MooTools for example).
The for-in statement as I said before is there to enumerate object properties, for example:
var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}
In the above example the hasOwnProperty method allows you to enumerate only own properties, that's it, only the properties that the object physically has, no inherited properties.
I would recommend you to read the following article: