search

HoVanBa123 / Project-kaban

0 stars 0 forks source link

Kiến thức về ES6/Javascipt #3

Open HoVanBa123 opened 4 years ago

HoVanBa123 commented 4 years ago
  1. Javascipt là gì ? - là một ngôn ngữ lập trình website, được tích hợp nhúng vào thẻ html giúp web sinh động hơn, JS giúp kiểm soát hành vi cuad trang web tốt hơn so với mỗi sử dụng html. Là ngôn ngữ lập trình được hộ trợ trên nhiều trình duyệt ... thậm trí trên cả trình duyệt di động. JS có thể ứng dụng trong nhiều lĩnh vực: lập trình website, xậy dựng ứng dụng web cho máy chủ, ứng dụng di động, trò chơi, App
    • Tác tác với html qua DOM.
    • Có nhiều thư viện được tạo ra từ JS: JQUERY, ANGULER, REATCJS, VUE -Ua nhược điểm
    • ưa điểm:
HoVanBa123 commented 4 years ago
  1. Các kiểu dữ liệu trong Javascipit
    • String
    • Number -Object -Bolean -Null: được gán vào biến, có giá trị không tồn tồn: ví dụ var a = null -undefined: không xác định, biến được khai báo nhưng không gán gán giá trị giá trị: giá trị var a null == undefined: fasle null === undefined: True tìm hiểu thêm về NaN, có nghĩa là một hàm trả về một giá trị không rõ ràng thì trả về NaN ( Ví dụ 0 x 0. vô cùng x 0 ...
HoVanBa123 commented 4 years ago
  1. Tìm hiểu về DOM trong JS: DOM là gì ? DOM ảo là gì ? DOM là mô hình đối tượng trong tài liệu HTML, DOM là cách JS dùng để truy vấn, thay đổi cấu trúc thuộc tính tài liệu HTML của thẻ, làm cho website sinh động hơn. Trong HTML được quản lý trong đối tượng document, thẻ cao nhất là HTML, tiếp theo là nhanh HEAD (title , style ...) và thẻ BODY (chứa vô sô các thẻ trong html) DOM là mô hình dạng cây:
    • Nút gốc là tài liệu HTML
    • Nút phần tử là biểu diễn cho mỗi phần tử HTML, phần tử head, body, trong đó có nút con title, p, div ...
    • Nút văn bản là mỗi ký tự trong thẻ HTML DOM ảo là gì ?
HoVanBa123 commented 4 years ago
  1. Lập trình hướng đối tượng OPP: Lập trình hướng đối tương là cái mô hình chúng ta ngồi code tạo ra các object có đặc điểm và khả năng hay là thuộc tính và phương thức khác nhau phối hợp làm việc với để hoàn thành chương trình. Ví dụ trong cty, cty như là một chương trình, nhân viên là các đối tượng, có đặc điểm khả năng khác nhau, có sư phân cấp, cấp trên cấp dưới phối hợp với nhau giúp công ty hoàn thành công việc. Lập trình các vấn đề phức tạp, lập trình hướng đối tượng giúp chúng ta đơn giản vấn, phân chia vấn đề, mỗi vấn đề nhỏ ta lập ra một đối tượng để quản lý nó, mỗi lần phát sinh lỗi, chúng ta biết nó nằm ở object nào. Các đặc điểm của lập trình hương đối tượng
    • Tính kết thức: kế thừa các thuộc tính và phương thức của đối tượng khác( dùng class a extens b), ví dụ trong một nhà, các người con sẽ kế thừa đặc điểm của người cha, chiều cao cân nặng, nhưng mỗi người cũng có đặc điểm khác nhau.
    • Tính đóng gói: là cho phép hoặc không cho phép truy cập giá trị thuộc tính của đối tượng, có từ khóa chính: private( là bảo mật, không có phép truy cập đối tượng từ bên ngoài), public( là cho phép truy cập), proted( chỉ cho phép truy cấp từ thằng con)
    • Tính đa hình: overload (nghĩa là trong một class có thể viết tên các phương thức giống nhau, tuy nhiên param truyền vào phải khác nhau), overite( có nghĩa là phải overite lại hàm của lớp cha)
    • Tính trìu tượng: là tập hợp những đối tượng có bản chất giống nhau, nhưng cách thức hoạt động khác nhau
HoVanBa123 commented 4 years ago
  1. Một số convention khi viết code hml, css:
HoVanBa123 commented 4 years ago
  1. Cấu trúc dữ liệu: Map và Set Map là cấu trúc dữ liệu cho phép lưu trữ dữ liệu key-value. Nhưng không phải là một object, trong object lưu trữ key sử dụng kiểu dữ liệu string hoặc number. Còn trong Map key và value lưu trữ bất kiểu dữ liệu nào, kể cả function Set là tập hợp các giá trị không trùng nhau: let s = new Set(['hello', 'hello']) -> consle.log(s) // hello https://viblo.asia/p/map-va-set-trong-javascript-GrLZDQNwlk0
HoVanBa123 commented 4 years ago
  1. Sử lý bất đồng bộ và bất đồng bộ: callback, promise, async, await… Thế nào là đồng bộ và bất đồng bộ: bất đồng bộ được hiểu là code sẽ được chạy tuần tự viết sẵn từ trên xuống dưới, code bên dưới chạy khi code bên trên đã chạy xong và trả về kết quả. Còn bất đồng bộ là code bên dưới đã chạy dù code bên trên chưa thực thi xong. Trong thực tế giải quyết các vấn đề phức tạp như thời gian load trang web, dữ liệu chẳng hạn, khi cần tải một số lượng bản ghi và up một file dung lượng lớn, chờ sử lý xong hành động mới thực hiện hành động tiếp sẽ mất thời gian, sử lý đồng bộ rất khó đưa ra giải pháp tối ưu. Vì chúng cần bất đồng bộ để sử lý. callback trong es5, promise trong es6 và async/await trong es7 ưu nhược điểm của đồng bộ và bất đồng bộ:
    • Ưu điểm đồng bô: code được thực thi tuần tự nên dễ kiểm soát code hơn, nếu có lỗi nào thì chương trình sẽ dừng, không chạy tiếp
    • Nhược điểm: Mất thời gian load toàn bộ trang và không tối ưu được code. Ưu nhược điểm của bất đồng bộ thì ngược lại 7a. Callback: là một hàm được khai báo được truyền vào tham số của hàm khác Nhược điểm của callback thực hiện nhiều câu lệnh bất đồng bộ ta phải lồng cac cacllback vào với nhau làm code khó đọc, khó dubug, cũng như khó phất triển 7b. Promise: giúp chúng ta giải quyết các vấn để của Callback, promisve sinh ra để sử lý một hành động và trả về kết quả cụ thể, thành công hoặc thất bại. Nếu thành công thì làm gì, thất bại thì làm gì ? Nếu thành công thì chuyển tới phương thức .then Thất bại chuyển tới phương thức .cacth var promise = new Promise((resolve, reject) => {}) promise.then((res) => {console.log(res)}) .cacth((res) => {console.log(res)}) 7c. async/await https://viblo.asia/p/javascript-xu-ly-bat-dong-bo-callbacks-promises-hay-asyncawait-maGK7OaLKj2 https://codelearn.io/sharing/bat-dong-bo-trong-javascript-phan-1
HoVanBa123 commented 4 years ago

8. Sử Fetch, Thư viên Axios API 8a. Fetch APT để gửi Request tới sever và nhận về response của resquest đó. fetch nhận đầu vào là một địa chỉ url để truy vấn. Phương thức fetch() sẽ trả về một promise có trạng thái resolve, reject. Nếu resquest thành công tương ứng với trạng thái resolve và sẽ chuyển tới 'Then' , đây là nơi chúng ta có sử dụng reponse, nếu resquest không thất bại tướng ứng trạng thái reject, chuyển tới thức 'Cacth' với lỗi tham số lỗi tương ứng. ví dụ: const data = {'username': name, 'email': email, 'password': password} fetch(url, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: "POST", body: JSON.stringify(data) }) .then((res) => { if (res.status === 200) { alert('Đăng ký thành công') } }) .catch((err) => {console.log(err)})

HoVanBa123 commented 4 years ago

9. code mẫu giao diện html, css, es6, scss: https://www.topcv.vn/xem-cv/c3d3f701199830810811f920c257913d?utm_source=link_i_topcv&utm_campaign=link_i_topcv&utm_medium=link_i_topcv&fbclid=IwAR31L9wgSFxt3sCH2WsjSKgq95NcUJji3ZdyqX--tuhY_7FqfE08XHe8Je0