@manhnguyenv

Welcome to my blog!

JavaScript

August 17, 2017 00:37

JavaScript: OBJECT

https://toidicodedao.com/2016/01/19/series-javascript-sida-object-trong-javascript/

JavaScript: PROTOTYPE

https://toidicodedao.com/2016/02/02/series-javascript-sida-po-ro-to-tai-prototype-la-cai-gi/

JavaScript: PROMISE

https://toidicodedao.com/tag/javascript-sida/

JavaScript: BIND, CALL VÀ APPLY

https://toidicodedao.com/2016/03/08/series-javascript-sida-bind-call-va-apply-trong-javascript/

JavaScript: ES6

https://toidicodedao.com/2016/04/05/series-javascript-sida-cung-lam-quen-va-chich-nham-nghich-es6/

JavaScript: LINQ trong JavaScript

https://toidicodedao.com/2015/04/14/ap-dung-linq-trong-javascript-chuyen-nhieu-nguoi-chua-biet/

JavaScript: LODASH

https://toidicodedao.com/2015/04/16/tang-suc-manh-cho-javascript-voi-lodash/

JavaScript: Practice

Dùng HTML, CSS, JS để viết một số widget nho nhỏ cho trang web của Trustpilot

 

Những vấn đề thường được hỏi khi phỏng vấn về Javascript

July 14, 2017 02:17

Nhu cầu về Javascript developer hiện nay trong thị trường IT là rất lớn. Nếu bạn có kiến thức ở mảng này thì cơ hội nghề nghiệp cũng như thu nhập của bạn cũng sẽ không hề ít. Nhưng trước khi bạn có được công việc mà bạn mong muốn, bạn sẽ phải thể hiện cho nhà tuyển dụng thấy khả năng của mình thông qua quá trình phỏng vấn. Trong bài viết này, tôi sẽ chia sẻ với các bạn về những vấn đề thường được nhà tuyển dụng hỏi khi phỏng vấn một ứng viên về Javascript.

Hãy cố gắng trả lời câu hỏi trước khi đọc phần trả lời nhé. Cùng bắt đầu nào!

 

Vấn đề đầu tiên, Scope


Cùng xem xét đoạn code sau.

(function() {
var a = b = 5;
})();

console.log(b);

Theo bạn, kết quả in ra console sẽ như thế nào?

Câu trả lời là 5. Lý do?

Trong đoạn code trên ta dùng hai phép gán, nhưng để ý kỹ đừng để bị đánh lừa, biến a được khai báo sử dụng từ khoá var. Điều này có nghĩa là a là biến cục bộ, trong khi đó b là biến toàn cục.

Để hiểu rõ đoạn code này, chúng ta sử dụng strict mode bằng cách khai báo 'use strict' bên trong thân hàm. Nếu strict mode được bật, đoạn code sẽ văng lỗi Uncaught ReferenceError: b is not defined. Strict mode sẽ yêu cầu bạn khai báo tường minh mọi thứ, vì thế đoạn code sẽ đươc viết lại như sau.

(function() {
'use strict';
var a = window.b = 5;
})();

console.log(b);

Vấn đề thứ hai, tạo native method


Hãy tạo ra phương thức square được sử dụng bởi đối tượng kiểu Number, phương thức này sẽ trả về kết quả là bình phương của số cho trước. Ví dụ.

var a = 2
console.log(a.square());
-> 4

Câu hỏi này dùng để kiểm tra kiến thức của developer về việc kế thừa trong Javascript cũng như về thuộc tính prototype của đối tượng. Nó cũng đồng thời xác nhận lại việc developer có kiến thức về việc mở rộng thêm phương thức cho các kiểu dữ liệu truyền thống, mặc dù điều này là điều không nên làm.

Một điểm quan trọng khác đó là chứng minh được rằng bạn có nhận thức về việc làm thế nào để không override những phương thức đã được định nghĩa trước đó. Điều này giải quyết bằng cách xác nhận rằng phương thức đã được tồn tại hay chưa trước khi bạn tạo nó.

Câu trả lời như sau.

Number.prototype.square = Number.prototype.square || function () {return this * this}

Vấn đề thứ ba, Hoisting


function test() {
console.log(a);
console.log(foo());

var a = 1;
function foo() {
return 2;
}
}

test();

Kết quả sau khi thực thi đoạn code này là gì, và tại sao?

Câu trả lời là undefined và 2. Lý do?

Việc khai báo biến và hàm đã được đưa lên đầu hàm sau khi áp dụng hoisting. Vì thế tại thời điểm biến a được console.log ra màn hình thì giá trị của nó chưa được xác định. Nói một cách đơn giản hơn, đoạn code trên sẽ được sắp xếp lại như sau trước khi thực thi.

function test() {
var a;
function foo() {
return 2;
}

console.log(a);
console.log(foo());

a = 1;
}

test();

Vấn đề thứ tư, từ khoá this


Cùng xem xét đoạn code dưới đây

var name = 'Hoang';
var obj = {
name: 'Alibaba',
prop: {
name: 'Aladin',
getName: function() {
return this.name;
}
}
};

console.log(obj.prop.getName());

var test = obj.prop.getName;

console.log(test());

Hãy trả lời kết quả sau khi đoạn code được thực thi và giải thích lý do.

Câu trả lời là đoạn code sẽ xuất ra màn hình là Aladin và Hoang. Lý do là vì context của hàm, thứ mà được liên kết với từ khoá this , trong Javascript nó phụ thuộc vào việc hàm được gọi như thế nào chứ không phụ thuộc vào cách khai báo.

Khi dòng console.log đầu tiên được gọi, hàm getName() được gọi dưới tư cách là hàm của obj.prop. Vì thế context sẽ được đưa về là obj.prop và this.name sẽ là obj.prop.name. Khi hàm getName() được gán cho biến test lúc này đang là một thuộc tính có scope global, thì kết quả trả về sẽ là window.name, cái mà đã được gán ở dòng đầu tiên.

Để tìm hiểu rõ hơn về từ khoá this, các bạn có thể tìm hiểu tại đây.

Vấn đề thứ năm, bind(), call() và apply()


Đọc lại đoạn code ở vấn đề thứ tư, vậy làm thế nào để dòng console.log cuối cùng in ra được kết quả là Aladin

Câu trả lời là có thể thay đổi context của function bằng cách sử dụng call() hay apply(). Nếu bạn chưa biết về chúng, các bạn có thể tìm hiểu qua bài viết bind, call và apply trong Javascript. Còn đối với câu hỏi trên đáp án sẽ như sau.

console.log(test.call(obj.prop));

Tóm lại
Trong bài viết này tôi đã giới thiệu với các bạn một số vấn đề mà nhà tuyển dụng thường hỏi để kiểm tra một Javascript developer. Câu hỏi khi phỏng vấn thực tế có thể sẽ khác biệt nhưng vấn đề tôi tin chắc là sẽ tương tự. Tôi hy vọng các bạn thấy nhưng chia sẻ của tôi là hữu ích, trong trường hợp bạn chưa thể trả lời được hết các câu hỏi, đừng lo lắng vì chỉ cần cố gắng tìm hiểu thì bạn có thể làm tốt hơn trong những lần kế tiếp.

Nếu các bạn có bất cứ những câu hỏi thú vị nào về việc phỏng vấn Javascript developer, đừng ngần ngại chia sẻ chúng ở phần comment nhé, chúng sẽ giúp ích được cho rất nhiều người khác đấy. Xin chào và hẹn gặp lại trong những bài viết tiếp theo.

 

 

Các bài StackOverFlow mà lập trình viên JavaScript phải đọc

10. Closure của Javascript hoạt động như thế nào?

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

  • Về closure của JavaScript
  • Closure là một khái niệm khá khó để có thể nắm bắt được hoàn toàn, tuy nhiên trong bài trên có rất nhiều sample code giúp bạn không hiểu tiếng Anh lắm vẫn có thể theo dõi được.

9. use strict có nhiệm vụ gì trong JavaScript, lý do phải sử dụng là gì?

http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it

Lợi/hại và ý nghĩa sử dụng use strict mode tại JavaScript.

8. Làm sao tôi có thể check một chuỗi string có chứa một substring khác không?

http://stackoverflow.com/questions/1789945/how-can-i-check-if-one-string-contains-another-substring

Đây là một nội dung rất quan trọng. Cả front-end dev và back-end dev đều cần nắm chắc.
Với vấn đề "một đoạn string có được chứa trong một đoạn string khác hay không", các JavaScript dev từ khắp nơi trên thế giới thảo luận và đưa ra rất nhiều giải pháp.

7. var functionName = function() {} với function functionName() {}

http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname

JavaScript có 1 vài cách để định nghĩa function, tại đây mọi người bàn luận về nó.
Về mặt phương thức, dù có biết các thể loại khác nhau đi chăng nữa, cũng không đồng nghĩa với hiểu được bản chất và lợi/hại của từng cách là gì.

6. Cách hiệu quả nhất để clone một object là gì?

http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object

Bàn luận về best practice khi muốn clone (duplicate) một object trong JavaScript. Tóm lại cần biết về cách dưới đây:

var oldObject = $(".hello");

// Copy chỉ DOM element của jQuery
oldObject.clone();

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

5. Có khác nhau gì nếu tôi sử dụng == hay === để so sánh bằng trong JavaScript không?

http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

Đây là nội dung mọi người hay chủ quan nghĩ rằng là ai cũng biết.
Tuy nhiên đây cũng chính là điểm tuyệt vời của StackOverflow, từ những chủ đề tưởng như rằng quá đơn giản, bạn sẽ có thể đào sâu để biết nguyên nhân cụ thể, lý do rõ ràng và thậm chí cả các link dẫn tới tài liệu quan trọng để tham khảo nữa.

4. Làm thể nào để tôi có thể lấy giá trị query string trong JavaScript?

http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript

Khi develop dựa nhiều vào jQuery, cần hiểu được rõ hoạt động của native từ gốc.
Dù bạn có nghĩ rằng jQuery rất dễ hiểu và sử dụng, nếu không nắm rõ được tận gốc về JS sẽ không nâng cao khả năng được.
Sẽ có sample code rất dễ hiểu về các vấn đề như cách sử dụng RegExp..

3. Include một JavaScript file trong một file JavaScript khác

http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file

Đây chắc hẳn là một vấn đề mà ai cũng từng nghĩ tới.
Câu trả lời tốt nhất được viết rất mạch lạc, rõ ràng và có tính liên kết tốt giúp hiểu cặn kẽ vấn đề khi load một file Javascript vào một file khác.

2. Sự khác nhau giữa call và apply?

http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply

Để hiểu được sự khác biệt giữa call()  apply(), cá nhân tôi nghĩ rằng câu trả lời có dẫn bài của Scott Allenrất hay và dễ hiểu.
apply() method cũng dồng nhất với call() method, ngoại trừ việc apply() yêu cầu param thứ 2 phải là array. Array này sẽ đại diện cho các argument của target method.

http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0

Sự khác nhau giữa code dưới đây là gì?

// pattern A
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

// pattern B
<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Các bài viết liên quan

JavaScript Loop

June 20, 2017 16:12

HTML5

http://html5demos.com/

https://www.webcodegeeks.com/html5/html5-page-structure-example/

 

HTML5 + CSS3

https://tutorialzine.com/2010/02/html5-css3-website-template

 

Show value of object

function showObject(obj) {
  var result = "";
  for (var p in obj) {
    if( obj.hasOwnProperty(p) ) {
      result += p + " , " + obj[p] + "\n";
    } 
  }              
  return result;
}

function showObjectjQuery(obj) {
  var result = "";
  $.each(obj, function(k, v) {
    result += k + " , " + v + "\n";
  });
  return result;
}

var test = { 
    'type' : 'news', 
    'name' : 'article1' 
};


showObject
(test); // type , news name , article1
showObjectjQuery(test); // type , news name , article1


https://www.sitepoint.com/back-to-basics-javascript-object-syntax/
https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_slice1
https://coderwall.com/p/_kakfa/javascript-iterate-through-object-keys-and-values

LOOP

var cties = {
"USA":[{"country":"Albuquerque (ABQ)"}, {"country":"Allentown (ABE)"}],
"Canada":{"country":"Calgary (YYC)"},
"Hawaii":{"country":"Honolulu International Apt (HNL)"}
};

for(var key in cties){
console.log(key + " : " + cties[key].country);
}

JavaScript LOOP

var homes = [
{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
},

{
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
},

{
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}
];

 

// ES5: Under ECMAScript 5, you can combine Object.keys() and Array.prototype.forEach():

Object.keys(homes).forEach(function(key) {
    console.log(key, homes[key]);
});

 

// ES6: Arrow function

Object.keys(homes).forEach(key => {
    console.log(key); // the name of the current key.
    console.log(homes[key]); // the value of the current key.
});  

 

// Inline

Object.keys(homes).forEach(key => console.log(key, homes[key]));

 

// ES7: Using Object.entries

Object.entries(homes).forEach(([key, val]) => {
    console.log(key); // the name of the current key.
    console.log(val); // the value of the current key.
});

 

// ES6: Recursive function

const loopNestedObj = (obj) => {
Object.keys(obj).forEach(key => {
if (obj[key] && typeof obj[key] === 'object') loopNestedObj(obj[key]); // recurse.
else console.log(key, obj[key]); // or do something with key and val.
});
};

loopNestedObj(homes);

 

// ES7: Using Object.entries instead of Object.keys

const loopNestedObj = (obj) => {
Object.entries(obj).forEach(([key, val]) => {
if (val && typeof val === 'object') loopNestedObj(val); // recurse.
else console.log(key, val); // or do something with key and val.
});
};

loopNestedObj(homes);

 

How to Loop through plain JavaScript object with objects as members?

for (var key in homes) {
// skip loop if the property is from prototype
if (!homes.hasOwnProperty(key)) continue;

var obj = homes[key];
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;

// your code
console.log(prop + " = " + obj[prop]);
}

Looping through all of the items in the window object?

do {
Object.getOwnPropertyNames(homes).forEach(function(name) {
console.log(name);
});
console.log("=============================");
} while(homes = Object.getPrototypeOf(homes));

Javascript in Microsoft's website

June 16, 2017 13:20

JavaScript Language Reference

https://docs.microsoft.com/en-us/scripting/javascript/javascript-language-reference

 

JavaScript in Visual Studio 2017

https://docs.microsoft.com/en-us/scripting/javascript/javascript-in-vs-2017

 

What's New in JavaScript

https://docs.microsoft.com/en-us/scripting/javascript/what-s-new-in-javascript

 

JavaScript Fundamentals

https://docs.microsoft.com/en-us/scripting/javascript/javascript-fundamentals

 

Advanced JavaScript

https://docs.microsoft.com/en-us/scripting/javascript/advanced/advanced-javascript

Javascript

June 8, 2017 14:55

TypeScript

Compiler: tsc greeter.js

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE = edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
</head>
<body>

<script type="text/javascript" src="file:///D:/Prj/AngularCLI/Prj01/greeter.js"></script>

</body>
</html>

Greeter.js

class Student {
    fullName: string;
    constructor(public firstName, public midleName, public lastName){
        this.fullName = firstName + " " + midleName + " " + lastName;
    }
}

interface Person {
    name: string;
    age: number;
}

function birthday(someone : Person) : Person {
    return {name: someone.name, age: someone.age};
}

function greeter(person : Person) {

    return "Hello, " + person.name + " " + person.number;

}

var user = new Student("Manh", "Viet", "Nguyen");

document.body.innerHTML = greeter(user);

document.addEventListener("DOMContentLoaded", function (event) {
    console.log(JSON.stringify(birthday({ name: "Judy", age: 39 })));
    console.log(JSON.stringify(user));
    console.log(JSON.parse("{'Name':'Manh','Age':34}"));
});

How to put Javascript code into the Address bar

The following is a snippet of code that everyone should probably have in their back pocket these days. Especially if you do a lot of online money transactions. The following javascript injection will reveal a true server name if the website you are looking at is being spoofed (hosted by someone other than the real site who probably wants to steal your money and/or identity) Just go to the page you need to check (e.g.-when you go to you bank's site or feel questionable) and post this script in the address bar:

javascript:alert("The actual URL is:\t\t" + location.protocol + "//" + location.hostname + "/" + "\nThe address URL is:\t\t" + location.href + "\n" + "\nIf the server names do not match, this may be a spoof.");

How to put Javascript code into the URL in a Bookmark

javascript:(function() {alert("The actual url is:\n" + location.protocol + "//" + location.hostname + "/" + "\n\nThe address URL is:\n" + location.href + "\n" + "\nIf the server names do not match, this may be a spoof.")})()

Select or Deselect Text Inside an Element Using JavaScript

https://www.thewebflash.com/select-or-deselect-text-inside-an-element-using-js/

Source Code

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function selectText(element) {
if (/INPUT|TEXTAREA/i.test(element.tagName)) {
element.focus(); if (element.setSelectionRange) { element.setSelectionRange(0, element.value.length); } else { element.select(); }
return;
}
var rangeObj, selection; if (document.createRange) { rangeObj = document.createRange(); rangeObj.selectNodeContents(element); selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(rangeObj); } else if (document.body.createTextRange) { rangeObj = document.body.createTextRange(); rangeObj.moveToElementText(element); rangeObj.select(); }
}
function deselect(element) {
if (element && /INPUT|TEXTAREA/i.test(element.tagName)) {
if ('selectionStart' in element) { element.selectionEnd = element.selectionStart; }
element.blur();
}
if (window.getSelection) { window.getSelection().removeAllRanges(); } else if (document.selection) { document.selection.empty(); }
}
$(function ($) { $('#btnSelect1').click(function () { selectText($('#exampleDiv')[0]); window.setTimeout(deselect, 3000); }); $('#btnSelect2').click(function () { selectText($('#exampleTextarea')[0]); window.setTimeout(function () { deselect($('#exampleTextarea')[0]); }, 3000); }); });
</script>
</head>
<body>
<h3>Demo</h3>
<style>
#exampleDiv {
padding: 8px;
background-color: white;
white-space: pre;
overflow-x: auto;
margin-bottom: 1em;
}

#exampleTextarea {
display: block;
width: 99%;
margin-bottom: 1em;
}
</style>
<p>Click the 'Run Demo' button below to select text inside a &lt;div&gt; element and deselect automatically in 3 seconds.</p>
<div class="post-format">
<div class="format-container pad">
<div id="exampleDiv">
Lorem ipsum dolor sit amet, autem assentior signiferumque sea ei, ad zril choro epicurei pri.
Qui an assum mazim adversarium. His ex illum noluisse atomorum, at tation laoreet quo,
qui movet petentium laboramus at. Usu ei dicam laoreet efficiendi. Dolorem sententiae ea vix,
illum vitae no eos. Eu eam prima pertinax dissentiet, laboramus disputando ullamcorper mei ex.
</div>
<p><button id="btnSelect1">Run Demo</button></p>
</div>
</div>
<p>Click the 'Run Demo' button below to select text inside a &lt;textarea&gt; and deselect it automatically in 3 seconds.</p>
<div class="post-format">
<div class="format-container pad">
<textarea id="exampleTextarea" rows="4" spellcheck="false">Lorem ipsum dolor sit amet, et sint inermis oportere cum, ut sea dolore aeterno euripidis, blandit appareat consequat nec te. Te natum lucilius mel. Ea sed numquam nominavi instructior, tollit utroque senserit ea eam. Eam putant partiendo ei.</textarea>
<p><button id="btnSelect2">Run Demo</button></p>
</div>
</div>
</body>
</html>

Categories

Recent posts