Javascript: September 2018

Monday, September 24, 2018

Canvas

<body>
<canvas id="my-canvas" width="300" height=”300"></canvas>
</body>

const canvas = document.getElementById('my-canvas');
const context = canvas.getContext('2d');

Vẽ đường thẳng

context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.strokeStyle='red';
context.stroke();

Vẽ hình chữ nhật
context.fillStyle = 'red';
context.fillRect(x, y, width, height);

Vẽ hình tròn
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.stroke();

Vẽ Text
context.fillStyle='red';
context.font='30px Arial';
context.fillText('Hello World',20,50,200);

Ve anh
const background= new Image();
background.src ='images/bg.png';
context.drawImage(background, 0, 0);

trong game loop sử dụng
requestAnimationFrame(update);

Thursday, September 20, 2018

Code và chạy JS không cần editor chỉ cần trình duyệt

codepen

jsfiddle

Wednesday, September 19, 2018

ES6

var, let, const
es6 không sử dụng var nữa, chỉ sd let và const

arrow function

x=>{x*x;}

tương đương với

function(x){
return x*x;
}

spread operator
... ten_array:
sẽ trải array đó ra các phần tử

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);

Expand snippet

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);

Expand snippet

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:

Enumeration VS Iteration