kiến thức [Event Tặng Title] Hướng dẫn học Javascript từ 0-> Nâng cao.

Ví dụ:
JavaScript:
const Age = 33;
let plusAge = 4;
Age  = 34;      //  error
Age = plusAge;   // error
Em đặt giá trị const cho Age là 33 rồi, giờ không gỡ được anh ạ, dùng "delete const Age = 33 ;" máy báo là "false", em cảm ơn .
 
Vâng tại trang about:blank đấy nó không lấy giá trị biến gán vào Age được nữa .
Trên kia là a lấy ví dụ cho việc k thể update lại giá trị const bằng cách gán giá trị. Chứ k phải là một ví dụ để chạy ra kq thì em thực thi code trên sẽ lỗi thôi. F5 lại đi em.
 
Trên kia là a lấy ví dụ cho việc k thể update lại giá trị const bằng cách gán giá trị. Chứ k phải là một ví dụ để chạy ra kq thì em thực thi code trên sẽ lỗi thôi. F5 lại đi em.
:D Dạ vâng em cảm ơn
 
Giải thích cặn kẽ về DOM.

* Hãy luôn nhớ concept này: "Browser nắm toàn bộ quyền hiển thị giao diện và các sự kiện khi website được load. JS chỉ là một ngôn ngữ sử dụng các API mà browser cung cấp để thông qua đó mà yêu cầu trình duyệt thay đổi gì đó với trang web. Thông thường các API này sẽ được brower convert ra dạng object để JS tiện thao tác."

Khi bạn load một website trên trình duyệt thì trình duyệt sẽ parsing toàn bộ site page với cấu trúc tree như này. Mỗi phần tử trong tree gọi là node:

IERlg.png


Trình duyệt sẽ tự convert các node này thành các đối tượng trong javascript, cung cấp sẵn luôn các phương thức và thuộc tính để bạn dùng JS thao tác biến đổi các node này.

Vậy các phương thức và thuộc tính được cung cấp sẵn gồm những gì?

Đây: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Có đầy đủ luôn, rất rất nhiều. Nhưng bạn khi mới bắt đầu, hãy chỉ tập trung vào Document, Element, Event ---> Thực hành biến đổi các node với 3 loại DOM này là đã nắm tương đối cách dùng JS điều khiển trình duyệt biến đổi các thẻ HTML (node) rồi.

Link:
https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/Element.

Muốn thành thạo làm việc với DOM, không ngoài gì khác bạn phải thực hành cực kỳ nhiều luôn. Nó chẳng có logic gì ở đây cả. Tất cả đã được phía browser viết mã sẵn ở dạng (C/C++) -> biên dịch ra mã máy --> rồi wrap lại thành API dưới dạng object cho JS. Việc của bạn là gọi ra mà dùng thôi.

Tôi có thấy một tài liệu viết về DOM dễ hiều: https://codelearn.io/sharing/thao-tac-voi-dom-bang-javascript ---> Viết bằng tiếng Việt cũng tương đối đầy đủ. Bạn nên tham khảo.

Còn thực hành, bạn có thể xem list video dưới. Rất dễ hiểu, trực quan và như đang cầm tay chỉ việc cho bạn:

OK!
 
Last edited:
Để hướng dẫn các bạn học JS cơ bản nhanh và hiệu quả. Mình giới thiệu một site, kiến thức cơ bản các ví dụ tương đối dễ hiểu. Bạn chỉ cần dành một ngày là hiểu hết. Vì đã là kiến thức cơ bản rồi, mình sẽ không viết lại nữa. Viết cũng chỉ như vậy thôi à. Chúng ta đi đến PHẦN NÂNG CAO trong thời gian tới.

Link JS cơ bản đây: https://www.frontendcheatsheets.com/javascript
 
Last edited:
Em có nền C cơ bản, đang tự học JS qua đây , thấy cặn kẻ lý thuyết - bài tập ở mỗi mục như thím này luôn. Có cái dở là kiểu như chỉ tận tay làm vậy , muốn hiểu sâu và quen tay thì phải tự làm project , tìm hiểu nhiều nguồn khác rồi mới có kinh nghiệm được
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/
( trước đó cũng học sơ qua HTML, CSS cũng ở trang này luôn, dự là học được sơ JS rồi sẽ quay lại HTML, CSS ôn lại để làm project đơn giản có đủ HTML-CSS- JS luôn rồi mới qua học tiếp React hoặc Angular vì thị trường đang thịnh 2 framework/ library này )
 
Closure. Tôi thì có đọc trên mạng họ viết cũng viết phức tạp lắm. Mà viết phức tạp quá thành ra sai mất đi bản chất, dẫn đến chẳng đâu vào đâu cả. Tôi thì từ xưa đến nay cái gì càng phức tạp, tôi lại càng muốn đưa nó xuống đơn giản nhất có thể. Ngày xưa đi thi ĐH, câu chứng minh BĐT tôi cũng kéo nó về đơn giản nhất và ăn trọn một điểm đấy. Tôi chứng minh chỉ có nửa trang giấy thôi, bạn tôi đứa nào cũng tràn hết cả một trang mà cũng được 0,25 với 0.5 thôi :D thôi chúng ta vào chủ đề chính đi.

Khi nhắc đến closure các bạn cứ hiểu thế này.

Trong JS nó có quy tắc là các biến global sẽ tồn tại mãi đến khi bạn tắt tab trên trình duyệt. Còn biến local sẽ được giải phóng khi mà cái function (nơi chứa biến local) được gọi ra để thực thi, thực thi xong rồi thì biến bị xóa khỏi bộ nhớ. Nhưng khi các function lồng nhau thì hàm cha tạm giữ lại giá trị các biến của nó để cho hàm con sử dụng. Chỉ giải phóng khi mà không còn hàm cháu hàm chắt nào sử dụng nữa.

Thế thôi khái niệm closure bạn cứ hiểu đơn giản vậy. Sau này, khi đi vào các kiến thức phức tạp hơn thì closure sẽ thêm thắt ý nghĩa (ví dụ dùng this trong closure, binding trong closure)....thì lúc ấy ta hẵng hay

Dù nó có thêm thắt thế nào cũng vẫn bám vào ý nghĩa cốt lõi như tôi vừa đề cập.

ví dụ 1:

JavaScript:
function par() {
  let a = 5;
  function chil() {
    let b = 7;
    function chil_of_chil() {
      let c = 4;
      console.log(a + b + c);
    }
    return chil_of_chil();
  }
  return chil();
}

par(); //16

ví dụ 2:

JavaScript:
const myGlobal = 0;
function func() {
  const myVar = 1;
  console.log(myGlobal); // logs "0"
  function innerOfFunc() {
    const myInnerVar = 2;
    console.log(myVar, myGlobal); // logs "1 0"
    function innerOfInnerOfFunc() {
      console.log(myInnerVar, myVar, myGlobal); // logs "2 1 0"
    }
    innerOfInnerOfFunc();
  }
  innerOfFunc();
}
func();

ví dụ 3:

JavaScript:
function buildContor(i) {
   let contor = i;
   let displayContor = function() {
        console.log(contor++);
    };
    return displayContor;
}
let myContor = buildContor(1);
myContor(); // 1
myContor(); // 2
myContor(); // 3

Từ ý nghĩa closure ta có thể hiểu trong cuộc sống là cha mẹ nếu không con cái gì thì chết đi rồi chẳng vướng bận gì. Nhưng còn con còn cháu thì cũng ráng sống cho con cái được nhờ :p
 
Last edited:
This trong Javascript.

Một điều buồn cười là cả thế giới dever JS chưa chốt với nhau được cách dùng this. Dùng thế nào cho đúng, dùng thế nào cho tiện, dùng thế nào cho tránh bug...và giảng giải làm sao cho người mới tìm hiểu. Cái nôi của JS là Mozilla thì định nghĩa this theo kiểu context (ngữ cảnh), kiểu như là "à this à, function khởi tạo chứa this rồi thì function ấy được gọi ra sử dụng trong context nào thì this lúc ấy nó tham chiếu đến các object của context ấy".

Chung chung đại ý là thế, ai chế ra thế nào thì dùng chứ chúng tôi (Mozilla) không khuyến khích các bạn dever phải làm thế này với this, phải dùng thế kia với this :D. Các bạn định nghĩa "window.self = this" rồi dùng this như self cũng được luôn.

Chính sự lộn xộn ấy mà đến ES6 ra thêm cái gọi là arrow function (hàm mũi tên) ngoài rút gọn cách khai báo function ra thì nó hạn chế cách dùng bừa phứa của "this" đi nhưng cũng không thể nào hoãn lại cái cách mà người ta (các coder) "this" lung tung được.

Còn với tôi thì dùng this bám theo cách mà Mozilla định nghĩa this: This tham chiếu đến đối tượng trong context mà hàm chứa nó được gọi ra. This khi trong hàm khởi tạo, thì bản thân this là một object rỗng.

Đây đây bạn xem hình dưới đây.

this-in-javascript-rule2a.png

Chú ý: bạn phải phân biệt hàm khởi tạo ra this và hàm chứa this được gọi ra. Chúng nằm ở hai context khác nhau.
Như ví dụ trên, hàm speak được gọi ra trong context chứa object greetMe nên this tham chiếu đến các phương thức, thuộc tính của greetMe.

Ở Context chứa function khởi tạo ra this: This là object rỗng và this chỉ đơn giản ngầm là trỏ đến một đối tượng nào đấy, mà đối tượng nào thì this sẽ chờ xem hàm chứa this, nó được gọi ra dùng trong context nào và context ấy lại đang chứa những đối tượng nào đang có liên quan với this thì this tham chiếu đến đối tượng ấy.

Ở Context hàm chứa this được gọi ra: Thì this lúc này bắt đầu tham chiếu đến đối tượng mà có liên quan đến nó, có ràng buộc với nó. Việc tham chiếu this vào obj kiểu bị động này là do Trình thông dịch JS check xem hàm chứa this đang được "gọi ra" trong context nào để trỏ this vào obj liên quan. Bởi vì bị động tham chiếu như vậy nên khi làm việc với "this" bạn cần phải biết mình đang muốn trình thông dịch nó trỏ this đi đâu.

Từ ý nghĩa này mà this được ứng dụng trong hàm constructor để tạo ra new instant object. Bạn sẽ gặp rất nhiều khi code JS.

constructors.png


Tạm thế đã, khuya rồi. Mình gọi bài này là "This cơ bản" trong JS nhé, sẽ có phần 2. gọi là "this" nâng cao :d
 
Last edited:
Thank bác, đã thấy sự tâm huyết của bác.:p
E sẽ cố gắng cày khoá này của bác.:big_smile:

Gửi từ Xiaomi Mi 9T Pro bằng vozFApp
 
This nâng cao và bản chất của this

Nhắc lại ý cũ:

"Ở Context chứa function khởi tạo ra this: This là object rỗng và this chỉ đơn giản ngầm là trỏ đến một đối tượng nào đấy, mà đối tượng nào thì this sẽ chờ xem hàm chứa this, nó được gọi ra dùng trong context nào và context ấy lại đang chứa những đối tượng nào đang có liên quan với this thì this tham chiếu đến đối tượng ấy."

Ở phạm vi bài viết này, không ngoài mục đích nào khác là chúng ta đi làm sáng tỏ ý nghĩa của "this" từ đấy tự suy luận ra cách dùng this.

Bạn xem lại phần nhắc lại ý cũ, chú ý đến cái mình nhấn mạnh. Khi bạn khởi tạo một hàm chứa this thì bạn hoàn toàn sẽ không rõ tương lai "this" được trỏ đi đâu đâu, cho tới khi bạn gọi hàm chứa this ra dùng thì mới biết được this nó trỏ đi đâu (lúc này là lúc bạn nắm được thế chủ động, còn lúc khởi tạo this là lúc bạn đang bị động).

Vậy thì bạn muốn this trỏ đi đâu bạn phải xác định được mối ràng buộc (nghĩa là mối liên quan) giữa hàm chứa this với đối tượng cần trỏ đến trong ngữ cảnh (context) cụ thể. Có 4 kiểu ràng buộc (bind) sau:
  1. Default Binding -> Mối ràng buộc mặc định
  2. Implicit Binding -> Mối ràng buộc ngầm định
  3. Explicit Binding -> Mối rằng buộc rõ ràng và tường minh
  4. Constructor Call Binding -> Mối ràng buộc với (hàm tạo) Constructor.
1. Mối ràng buộc mặc định (Default Binding) trông nó như thế này:
1_F-pUslZS39261HlnHIHtQw.png

Hàm foo(); lúc này đang được gọi trong context global.
--> Nghĩa là trình thông dịch không tìm ra mối liên hệ this với object cụ thể nào thì nó điều "this" ra context global. (mặc định là vậy)
--> Lúc này thì trình thông dịch lại tiếp tục dò xem trong context global xem có gì liên quan với this không thì cho this tham chiếu vào. Như ví dụ trên, dò ra trong context global có biến a (có liên quan đến this) thì trỏ vào.

2. Mối ràng buộc ngầm định (Implicit Binding).
1_MmfZSEjagX_tSVx8Pcs5bg.png


3.Mối rằng buộc rõ ràng và tường minh
1_cto9XgoZ9koWgr1Au2nxAw.png


4. Ràng buộc với Constructor:

JavaScript:
function giveAge(age) {
  this.age = age;
}

const bar = new giveAge(22);
console.log(bar.age); // 22

Quá dễ hiểu cho case này. Ban đầu this là đối tượng rỗng, khi hàm chứa "this" được gọi ra dùng, this sẽ tìm đến new giveAge để xác định ràng buộc và tham chiếu đến giá trị truyền vào trong từ khóa "New". Người ta hay gọi là tham chiếu đến instant object.

Kết thúc 2 bài học "this" trong javascript. Chúng ta chỉ tìm hiểu this đến đây thôi, trong quá trình bạn làm với các dự án thực tế. Bạn sẽ từ bản chất của this mà minh đã trình bày, từ đó tư duy và dùng theo cách của bạn. Đừng cố học lý thuyết về "this" quá nhiều, nó sẽ làm bạn rối tung lên và mơ hồ. Giờ hiểu bản chất là được rồi. Sau này thì đi làm viết code ứng dụng thực tế this trong các bài toán cụ thể, bạn sẽ làm chủ được this! OK 🥰.

Và cuối cùng là khảo sát một dự án (game) mini xem người ta dùng this ra sao:
https://github.com/dissimulate/Clarity


nói chung lúc chưa biết code, ta cứ xem càng nhiều project càng tốt cứ đi dạo dạo thế. Xem xem họ ứng dụng this ra sao. Học hỏi và nhớ ghi chú lại. Từ từ rồi khi đi vào dự án thực tế của bạn, bạn sẽ sử dụng những ghi chú đấy. Thành là lên trình, đồng nghiệp nhìn cách bạn giải quyết vấn đề khoa học, code it bug. Ae thân thiện với nhau ngay :big_smile: code mà dùng this lung tung đến lúc đồng nghiệp fix bug điên hết người thì chỉ có :hell_boy::beat_brick:
 

Attachments

  • 1_MmfZSEjagX_tSVx8Pcs5bg.png
    1_MmfZSEjagX_tSVx8Pcs5bg.png
    36.4 KB · Views: 180
Last edited:
Back
Top