Cách trigger sự kiện change trong react từ trình duyệt

Cách trigger sự kiện change trong react từ trình duyệt

Mở đầu Nếu bạn đã từng tìm cách để trigger sự kiện change từ trình duyệt(browser) và muốn nó gọi sự kiện onChange ở trong project react, bạn sẽ gặp không ít khó khăn vì change event trong react đã được tùy biến lại cho phù hợp với các loại browser khác nhau. Ví dụ ta có một đoạn html như sau: <input type="text" class="myInput"> Hàm onChange trong react sẽ đơn giả...

Cơ bản về async await trong javascript

Cơ bản về async await trong javascript

Bài này giành cho những bạn bắt đầu học nodejs như mình. Khi bắt đầu lập trình với nodejs, vì javascript(js) là bất đồng bộ(asynchoronous) nên mình gặp khó khăn trong việc tổ chức code giống như trong lập trình đồng bộ (synchoronous). Việc cho các đoạn code vào trong các callback khiến mình cảm thấy code trở lên khó đọc theo luồng như trong PHP hay Ruby, nên mình đã tìm hiểu và sử dụng cú pháp async await theo chuẩn ES6 của JS. Sử dụng các cú pháp mới này giúp c...

Cơ chế hoạt động của javascript và nodejs

Cơ chế hoạt động của javascript và nodejs

Hiện nay nodejs đang nổi lên là ngôn ngữ server rất hot. Nodejs là ngôn ngữ javascript chạy trên server, có ưu điểm là thực thi nhanh, bất đồng bộ. 1. Non-blocking I/O Trong javascript, hầu hết các lời gọi I/O đều là non-blocking. Nghĩa là khi có HTTP request, truy xuất dữ liệu trong DB hoặc đọc ghi vào bộ nhớ thì hệ thống sẽ không tạm dừng (blocking) các đoạn code tiếp theo (như các ngôn ngữ server khác PHP, Ryby,...) mà sẽ trao quyền thực thi những lời gọi I/O này cho ...

Giải thích về pass-by-reference và pass-by-value

Giải thích về pass-by-reference và pass-by-value

Mở đầu Khi học một ngôn ngữ lập trình, một trong những thứ bạn phải nắm được đó là ngôn ngữ đó truyền biến vào hàm bằng cách nào, khi thao tác với biến đó trong hàm thì có ảnh hưởng tới biến nằm ngoài hàm hay không? Điều này là rất cần thiết để tránh những khó hiểu về sau, nhất là những người đang ...

Scope và closure trong javascript

Scope và closure trong javascript

Đối với những bạn lập trình web nói chung và lập trình js nói riêng thì những kiến thức về scope, closure là cần phải nắm rõ. Js là một ngôn ngữ lập trình khá khó, nếu không nắm rõ cách hoạt động thì sẽ gặp phải những vấn đề khá nan giải. Nhiều người ban đầu dùng js thì sẽ thấy rất dễ, càng làm vào sâu hơn sẽ thấy phức tạp dần với các vấn đề khó trong js l...

Cơ chế browser load HTML và JS

Cơ chế browser load HTML và JS

Bài này mình xin giới thiệu sơ qua về cách trình duyệt tải nội dung HTML và CSS như thế nào. 1. Thứ tự thực hiện khi trình duyệt tải nội dung HTML và JS. Lấy nội dung trang HTML (ví dụ index.html) Bắt đầu dịch (parse) trang HTML cho trình duyệt. Nếu bộ dịch của trình duyệt gặp phải thẻ <script> mà tham chiếu tới file script ngoài. Trình duyệt sẽ gửi request để lấy nội dung file script đó, trong quá trình gửi request này, trình duyệt sẽ tạm ngừn...

Gọi hàm trong javascript

Gọi hàm trong javascript

Trong JS, dấu () để gọi thực thi hàm. 1. Function Expression Function expression là function được khởi tạo bằng phép gán =; function có thể có tên hoặc không có tên. VD: var f = function() { console.log(5); } // hoặc var f = function test(){ console.log(5); } Function expression không được hoisting(khác với function declaration giải thích phía dưới) console...

Giải thích cụ thể về this trong javascript

Giải thích cụ thể về this trong javascript

1. Mở đầu Trước khi học hiểu về this bạn nên học trước về scope và closure Trong js, từ khóa this là thứ rất hay nhưng cũng là thứ gây ra bao rắc rối cho nhiều người, nhất là đối với những người đi từ ngôn ngữ lập trình khác sang js. Lý do lớn nhất khiến this gây hiểu nhầm cho bao nhiêu người chính là v&igr...

eval trong javascript

eval trong javascript

Ta nên tránh dùng eval vì một số lý do sau: Dễ bị tấn công injection. Không debug được code trong eval. Hiệu năng khi chạy code trong eval. Có 2 cách gọi eval là gọi trực tiếp(Direct call) và gọi gián tiếp(Indirect call) Direct call là gọi trực tiếp bằng cách gọi eval(...your code...)  Indirect call là gọi gián tiếp thông qua một biến trung gian(xem VD phía dưới) Xét ví dụ sau: ...

Cuộn selected value lên đỉnh

Cuộn selected value lên đỉnh

    Ví dụ khi chọn dropdown một thẻ select ta được như sau:   Giá trị 18時 đang được đặt ở giữa thanh dropdown, ta muốn di chuyển giá trị 18時 lên đỉnh của thanh cuộn thì viết một đoạn code js như sau:   var $dropdown = $(dropdownElement); var selectedIndex = $dropdown.find('.selected').data(liTagIndex); var liHeight = $dropdown.find('li').first().outerHeight(); $dropdown.scrollTop(selectedIndex*liHeight);   ...