Guide to DateTime Manipulation (edit)

• Greenwich Mean Time (GMT)
• Coordinated Universal Time (UTC)
• International Organization for Standardization (ISO)

https://www.toptal.com/software/definitive-guide-to-datetime-manipulation

https://www.geeksforgeeks.org/javascript-date-utc-method/

https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

How to write the current date time to logging file with the same format?

UTC & ISO in C#

var d1 = DateTime.Now;
var s1 = d1.ToUniversalTime().ToString("yyyy-MM-dd\\THH:mm:ss.fffK"); // Return => 2020-09-01T04:52:11.511Z
Console.WriteLine(s1);

var d2 = DateTime.Now;
var s2 = d2.ToUniversalTime().ToString("ddd, dd MMM yyyy HH:mm:ss 'GMT'"); // Return => Tue, 01 Sep 2020 04:46:11 GMT
Console.WriteLine(s2);

DateTime in C#

using System;
using System.Globalization;

namespace ConsoleApp1
{
 internal class Program
 {
 private const string DateFormatInJavaScript = "yyyy-MM-dd"; //For example: 2019-07-31

 private const string DateTimeString = "yyyy-MM-dd HH:mm:ss"; //For example: 2019-07-31 15:00:23

 private const string DateTimeUTCString = "ddd, dd MMM yyyy HH:mm:ss 'GMT'"; //For example: Tue, 01 Sep 2020 04:46:11 GMT

 private const string DateTimeGMTString = "ddd, dd MMM yyyy HH:mm:ss 'GMT'"; //For example: Tue, 01 Sep 2020 04:46:11 GMT

 private const string DateTimeISOString = "yyyy-MM-dd\\THH:mm:ss.fffK"; //For example: 2020-09-01T04:52:11.511Z

 private const string TimeFormatInJavaScript = "HH:mm"; //For example: 14:31

 private static void Main(string[] args)
 {
 string dateString = "2020-09-01T04:52:11.511Z";

 DateTime dt = DateTime.ParseExact(dateString.Substring(0, 24), DateTimeISOString, CultureInfo.InvariantCulture);

 Console.WriteLine("Before converting:");
 Console.WriteLine(dateString);

 Console.WriteLine("After converting:");
 Console.WriteLine(dt.ToUniversalTime().ToString(DateTimeISOString));
 Console.WriteLine(dt.ToUniversalTime().ToString(DateTimeUTCString));
 Console.WriteLine(dt.ToUniversalTime().ToString(DateTimeGMTString));
 }
 }
}

UTC & ISO in SQL + C#

https://stackoverflow.com/questions/1820915/how-can-i-format-datetime-to-web-utc-format/

https://stackoverflow.com/questions/44788305/c-sharp-convert-datetime-object-to-iso-8601-string

string foo = yourDateTime.ToUniversalTime() .ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss'.'fff'Z'");

UTC & ISO in JavaScript

https://www.w3schools.com/jsref/jsref_obj_date.asp

var d1 = new Date();
var s1 = d1.toISOString();
console.log(s1);
// Return => 2020-09-01T04:34:35.194Z

var d2 = new Date();
var s2 = d2.toUTCString(); // Note: .toUTCString ~ .toGMTString()
console.log(s2);
Tue, 01 Sep 2020 04:34:58 GMT

Web API (C#)

https://stackoverflow.com/questions/31987050/how-to-force-iso-format-yyyy-mm-ddthhmmss-sss-on-the-json-output

public static class WebApiConfig
{
 public static void Register(HttpConfiguration config)
 {
   ...
   config.Formatters
     .JsonFormatter
     .SerializerSettings
     .DateFormatString = "yyyy'-'MM'-'dd'T'HH':'mm':'ss.fffK";
 }
}

Utils (C#)

https://gist.github.com/dmorosinotto/81e8d809a3833b7caf7b3c813703a8e6

JavaScript (JS) đỉnh cao (edit)

https://1loc.dev/

This project is developed by Nguyen Huu Phuoc

https://github.com/phuoc-ng/1loc

Products

You might be interested in my products:

Resources

Design pattern implementations in TypeScript

https://github.com/torokmark/design_patterns_in_typescript

Algorithms and data structures implemented in JavaScript with explanations and links to further readings

https://github.com/trekhleb/javascript-algorithms

JavaScript Style Guide

https://github.com/nghuuphuoc/javascript

A collection of awesome browser-side JavaScript libraries, resources and shiny things.

https://github.com/nghuuphuoc/awesome-javascript

1) Functional Programmer

https://www.freecodecamp.org/news/how-point-free-composition-will-make-you-a-better-functional-programmer-33dcb910303a/

Trở thành Functional Programmer - Phần 6

https://viblo.asia/p/tro-thanh-functional-programmer-phan-6-EyORkbjEGqB

Link của các phần trước: Phần 1, Phần 2, Phần 3, Phần 4, Phần 5

2) Kỹ thuật Currying trong JavaScript

https://nvksolution.com/ky-thuat-currying-trong-javascript/

3) Point Free

Point-free gotchas in JavaScript

https://dev.to/danhomola/point-free-gotchas-in-javascript--3pfi

Point-free in JavaScript

https://lucasmreis.github.io/blog/pointfree-javascript/

Function Composition point-free style

https://medium.com/tech-tajawal/function-composition-point-free-style-54a209946e6

Side effects may include, but are not limited to

• changing the file system
• inserting a record into a database
• making an HTTP call
• mutations
• printing to the screen/logging
• obtaining user input
• querying the DOM
• accessing system state

Functional JS #7: Point-free style

https://medium.com/dailyjs/functional-js-7-point-free-style-b21a1416ac6a

JavaScript JS (edit)

JavaScript: Set

document.getElementById(id).attribute = new_value;

document.getElementById("Username").value = window.Username;
document.getElementById("Password").value = window.Password;
document.getElementById("RememberPassword").checked = window.RememberMe === 'True';

JavaScript: Checkbox

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

<!DOCTYPE html>
<html>
<body>

Checkbox: <input type="checkbox" id="myCheck">

<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>

<script>
function check() {
 document.getElementById("myCheck").checked = true;
}

function uncheck() {
 document.getElementById("myCheck").checked = false;
}
</script>

</body>
</html>

JavaScript: Check null

element1 = document.getElementById(id);

if(element1 != null)
{
    //code to set the value variable.
}

References

Input Type: text, password, checkbox, radio, hidden, file, submit

Textarea

Select > Option

http://javascript-coder.com/html-form/html-form-tutorial-p1.phtml

http://javascript-coder.com/html-form/html-form-tutorial-p2.phtml

Vòng lặp trong JavaScript (edit)

• HTMLCollection
• NodeList
• HTML DOM querySelector() Method
• HTML DOM querySelectorAll() Method
• document.getElementById('person'); //So sánh document.getElementById('person'); với elem.getElementById('person');
• document.getElementsByTagName('*');
• document.querySelector('*')
• elem.getElementsByTagName(tag);
• elem.getElementsByClassName(className);
• elem.querySelectorAll(css);
• elem.querySelector(css); //So sánh elem.querySelector(css); với elem.querySelectorAll(css)[0];
• elem.closest(css);
• elem.matches(css);
• elem.closest(css);

Remember:

• document.getElementById
• getElementsBy*
• querySelectorAll
• querySelector
• matches
• closest

Tham khảo

https://viblo.asia/p/mot-so-cau-lenh-javascript-huu-ich-de-thao-tac-voi-dom-WEMGBVYNGQK

https://flaviocopes.com/selectors-api/

http://zetcode.com/javascript/queryselector/

https://javascript.info/searching-elements-dom (Searching: getElement* and querySelector*)

Get the pure text without HTML element by javascript?

For loop for HTMLCollection elements

MDN

Mong muốn

Lấy được text trong dropdown

Giải pháp

var list = document.getElementsByTagName('li'); var startIndex = list.length - 16;var n = list.length; for (var i = startIndex; i < n; i++) { console.log(list[i].innerHTML.replace(/<[^>]*>/g, " ")); }

Kết quả

Một chương trình JavaScript đơn giản

<!doctype HTML>
<html>
<head>
<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>
<script>
// my hacky approach:
function get_content() {
 var html = document.getElementById("txt").innerHTML;
 document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
 var element = document.getElementById('txt');
 element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
 txt.innerHTML = txt.innerText || txt.textContent;
}
</script>
</head>
<body>
<p>
<a href="https://stackoverflow.com/questions/6743912/get-the-pure-text-without-html-element-by-javascript/">Get the pure text without HTML element by javascript?</a>
</p>
<input type="button" onclick="get_content()" value="Get Content (bad)"/>
<input type="button" onclick="gabi_content()" value="Get Content (good)"/>
<input type="button" onclick="txt_content()" value="Get Content (shortest)"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
</body>
</html>

JavaScript eBooks (edit)

https://github.com/divyanshu-rawat/JS-Worth-Read

http://pepa.holla.cz/wp-content/uploads/2015/11/Speaking-JavaScript.pdf

The "use strict"

Learn: https://www.bitdegree.org/learn/javascript-use-strict/

Code: https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial

Promises for asynchronous programming

const isSmallThenTen = (num) => {
    return new Promise((resolve, reject) => {
        if(num < 10) {
            resolve(true)
        } else {
            reject(false)
        }
    })
};

isSmallThenTen(11)
    .then(res => console.log('The number is smaller then 10'))
    .catch(err => console.log('The number is not smaller then 10'));

Arrow function inline

var array = [1, 2, 3, 4]

var sumOfArrayElements = array.reduce((acc, value) => acc + value, 0)
var productOfArrayElements = array.reduce((acc, value) => acc * value, 1)

Arrow function complex

var array = [1, 2, 3, 4]

const sum = (acc, value) => {
  const result = acc + value
  console.log(acc, ' plus ', value, ' is ', result)
  return result
}
var sumOfArrayElements = array.reduce(sum, 0)

Template strings

function hello(firstName, lastName) {
  return `Good morning ${firstName} ${lastName}! 
How are you?`
}

console.log(hello('Jan', 'Kowalski'))

The Closures

Closures explained with JavaScript

The Module Pattern

var counter = (function(){
    var i = 0;

    return {
      get: function(){
        return i;
      },
      set: function( val ){
        i = val;
      },
      increment: function() {
        return ++i;
      }
    };
}());

The Immediately-Invoked Function Expression (IIFE) Pattern

(function () { // open IIFE
    var tmp = ...; // not a global variable
}()); // close IIFE

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

IIFE use case ???

Tối ưu mã HTML, CSS, JavaScript (edit)

Nén HTML và tối ưu hóa JavaScript

Sử dụng tool: https://csscompressor.net

Nén GZip với website ASP.NET 

Sử dụng tool: https://checkgzipcompression.com

https://thichchiase.com/web-design/nen-gzip-voi-website-asp-net-4-5-iis-8.html

Tối ưu hiệu suất và tốc độ website ASP.NET P1

Tối ưu hiệu suất và tốc độ website Asp.net P2

Tối ưu hiệu suất và tốc độ website Asp.net P3

Tối ưu hiệu suất và tốc độ website Asp.net P4

Tối ưu hiệu suất và tốc độ website Asp.net P5 

GZip trong ASP.NET MVC

https://weblog.west-wind.com/posts/2012/Apr/28/GZipDeflate-Compression-in-ASPNET-MVC

Change Background Image Every 5 Seconds (edit)

<script>
 $(function () {
 var body = $('body');
 var backgroundImages = [
 'url("/Content/frontend/img/bg1.jpg")',
 'url("/Content/frontend/img/bg2.png")'];
 var current = 0;

 function nextBackground() {
 body.css(
 'background-image',
 backgroundImages[current = ++current % backgroundImages.length]);

 setTimeout(nextBackground, 5000); //automatically change background-image every 5 seconds
 }
 setTimeout(nextBackground, 5000); //automatically change background-image every 5 seconds
 body.css('background-image', backgroundImages[0]);
 });
</script>

https://stackoverflow.com/questions/22075468/jquery-changing-background-image-with-timer

https://css-tricks.com/forums/topic/change-body-background-every-10-sec/

1. Scope trong javascript là gì?

2. Sự khác nhau giữa var, const và let?

3. Anonymous Functions là gì?

4. Self-Executing Anonymous Functions là gì?

5. Closures trong javascript là gì?

6. Những hàm cơ bản của Array, Function, Object?

7. OOP trong JavaScript: Class, Object, Function, Prototype

8. Promise, bind, call, apply?

9. Event Bubbling, Event Propagation Explained

10. Callback function, Arrow function

11. Strict mode, hoisting, this?

"use strict";
x = 3.14; // This will cause an error

// Non-strict code...
(function(){
"use strict";
// Define your library strictly...
})();
// Non-strict code...

12. Bind(), Call(), Apply()

13. Kiểu dữ liệu: Boolean, Number, String, Object, Array, null, undefined, symbol

14. Angular 2 Two-way Binding

15. Promise & Observable trong Angular?

16. Array function: Map, Reduce, Filter, forEach, find

17. Throttle Function là gì?

18. Debounce function là gì?

19. setTimeout() và setInterval()

20. Dependency Injection trong Angular

21. Unit test code frontend?

22. Lazy loading?

23. Design patterns in JavaScript? Prototype Pattern, Module Pattern, Observer Pattern, Singleton Pattern...

https://toddmotto.com/mastering-the-module-pattern/

24. Callbacks, Promises, Observables and Async/Await

https://www.academind.com/articles/javascript/callbacks-promises-observables-async-await/

25. Array native functions: Map, Filter, Reduce, Some, Every, Find

https://coderwall.com/p/_ggh2w/the-array-native-every-filter-map-some-foreach-methods

https://leanpub.com/javascriptallongesix/read

http://reactivex.io/learnrx/

((diameter) => diameter * 3.14159265)(1 + 1) //6.2831853

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

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() và 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.

1. Href attribute cho JavaScript link: “#” hay “javascript:void(0)”?

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

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

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>