Note: js +thuật toán + html + mysql

[thaiphuongit25]

- Các phần quan trọng của ES6:

• [ ] Định nghĩa:

  • Es6 (ECMAScript) là phiên bản cải tiến của javascript, ra đời từ 2015, nó được thêm nhiều tính năng hỗ trợ mạnh mẽ như phía dưới

• [ ] 1. let và const**

• Giống nhau: sử dụng trong 1 phạm vi block( gọi là block scope)

• Khác nhau: let dùng để gán biến lại nhiều lần, const thì duy nhất, ko gán được Ví dụ: let a = 1, gán: a = 2, a = 3 const pi = 3.14, không thể gán tiếp pi = 4 hoặc bất kỳ sốt khác => Lưu ý: + Nếu biến là một số hoặc 1 chữ cụ thể, thì const phải khai báo biến toàn cục và viêt chữ in hoa

  • Thông thường hay dùng const để gán biến biến nếu chỉ sử dụng 1 lần
    • Nếu biến const là một đối tượng thì có thể thay đổi phần tử trong đối tượng, tuy nhiên ko thể gán lại được Ví dụ: const arr = [5, 6], ta hoàn toàn có thể thêm 1 phần tử cho arr. arr.push(7), kết quả [5, 6, 7]

• [ ] 2. Arrow Function:**

  • Nó được hình thành bởi 1 danh sách params( đối số) và theo sau là 1 mũi tên => Ví dụ: // cách viết thông thương theo kiểu es5
    1. function addition(a, b) { return a + b }

  // cách viết theo es6, với đối số truyền vào là a, b

  2. const addition = (a, b) => a + b;

  //Nếu chỉ có 1 đối số a truyền vào thì như sau

  3. const add = a => 5 + a // Viết kiểu dùng dấu {}, chỉ sử dụng khi có nhiều tính toán hoặc gán nhiều hơn 1 dòng
     • Tìm số lớn nhất của a, b

  4. const addition = (a, b) => {
       if (a > b) {
        return a
      else {
       return b
     }
     }

     => Phân biệt: nhìn 2 function 1, 2 mục đích là tính tổng 2 số a, a. cách đầu phải dùng đến return, cách 2 dùng trên 1 hàng thì nó mặc định hiểu return về kết quả phía sau. => Lưu ý: Es6 thì có thể không cần dùng dấu ; sau mỗi câu lệnh, nó tự hiểu mỗi hàng là 1 câu lênh

• [ ] Destructuring và import, export

  • export là xuất ra (public) biến hoặc function để nơi khác có thể dùng được
  • import thì lấy cái vừa export để dùng
  • Có 2 loại export và export default:
    • export default: + dùng khi chỉ có 1 biến, hàm hoặc class trong 1 file: Ví dụ: export default App
    • Dùng khi trong 1 file có nhiều biến hoặc function: Ví dụ file: utils.js có như sau const PI = 3.14 const sum = (a, b) => a + b để public 2 biến trên cần: export default Common as

[HoVanBa123]

ok, thank you.

[HoVanBa123]

khai báo var thì thế nào ? var nó hoạt động rộng hơn phải giống ? gây lãng phí nó nhớ hơn phải không. trường hơp nào dùng khai báo var. Mi nói rõ hơn được ko ?

[thaiphuongit25]

var khai báo biến global. tuy nhiên rất ít khi xuất hiện trong project dùng reactjs. ví dụ var khai báo dùng ngoài class.

[thaiphuongit25]

@HoVanBa123 Đọc thêm về es6 tóm tắt tại đây: https://viblo.asia/p/es6-tu-co-ban-toi-nang-cao-phan-1-OeVKB8jJlkW

[thaiphuongit25]

phần 2: https://viblo.asia/p/es6-tu-co-ban-toi-nang-cao-phan-2-GrLZDOxJKk0 phần 3: https://viblo.asia/p/es6-tu-co-ban-toi-nang-cao-phan-3-6J3ZgxELlmB

[thaiphuongit25]

2. Thuật toán+ phương pháp giải quyết
   • Ví dụ 1: Đề bài: tìm số lớn nhất của 2 số.
   • Giả thiết đặt ra: vì tìm số lớn nhất của 2 số, nên chúng ta cần có 2 biến đầu vào của 1 function là a, b
   • Lấy một số ví dụ thực tế của bài toán: ví dụ 2 số 12 và 2 thì số lớn nhất phải là 12 -> vậy chỉ xẩy ra chỉ có 2 trường hợp là a > b hoặc b > a.
   • Thiết kế function: maxOfTwoNumber(a, b)
   • Để tìm kiểm tra ta sẽ nghĩ đến dùng if, else
   • Triển khai:

function maxOfTwoNumber(a, b) {
       if (a >b) {
          return a
      } else {
         return b
     }
  }

• Kiểm thử: chạy bằng tay trươc, nhập 2 số maxOfTwoNumber(12, 2) nó sẽ chạy vào điều kiện a > b vậy kết quả là 12.
• Thực hiện trên trình duyệt: mở consolog chrome và test thử các trường hợp khác.
• Okay. function chạy ngon lành:
• Tối ưu: nhìn có vẽ ngon nhưng lời dài code, vậy có cách nào tối ưu không => suy nghĩ đến toán tử 3 ngôi 👍
  • Tối ưu như sau:

    function maxOfTwoNumber(a, b) {
    return a > b ? a : b
    }

    -> nhìn có vẽ ngon lành => lưu ý có thể viết bằng es6 như sau:

    const maxOfTwoNumber = (a, b) => {
    return a > b ? a : b
    }

    => very good

[thaiphuongit25]

Bài 2: kiếm tra 1 số và in ra nếu nó chia hết cho 3 cho 5 hoặc cho cả 3 và 5. output bài toán: Nếu số đó chia hết cho 3 thì in 'Số chỉ chia hết cho 3' Nếu số chia hết cho 5 thì in 'Số chỉ chia hết cho 5' Nếu số chia hết cho cả 3 và 5 thì in 'wow, số này chia hết cho cả 3 và 5' Are you ok? Phương pháp tư duy và giải quyết Step 1: tìm biến đầu vào, vì kiểm tra 1 số nên chúng ta chỉ cần 1 biến là đối số đầu vào Step 2: viết tên function: printResultOfNumber(n) -> tên hàm phải mang 1 ý nghĩa của việc thực hiện, nếu bí thì viết tương đối Step 3: Lấy ví dụ thực tế và liệt kê tất cả trường hợp xẩy ra: ví dụ n = 6 thì chỉ chia hết cho 3, n = 10 thì chỉ chia hết cho 5, n = 15 chia hết cho cả 3 và 5. Step 4: Nhìn trên sẽ có ít nhất 3 trường hợp xẩy ra, chúng ta sẽ sử dụng if -> ok, let's go. Step 5: Thử 1 bước đã, có nên check if theo thứ tự nó sẽ như sau

function printResultOfNumber(n) {
       if (n % 3 == 0) {
          console.log(' N chi chia het cho 3')
      } else if (n % 5 == 0) {
         console.log('N chi chia het cho 5')
      } else {
        console.log(' N chia het cho ca 3 va 5')
      }
  } 

-> nhìn có vẽ ngon tuy nhiên thử đã nhé, nếu nhập n = 15 mong muốn lấy cái else dưới cùng, tuy nhiên nó cũng thỏa mãn cái if đầu vậy kết quả in ra là 'N chi chia het cho 3' => có gì đó sai sai Step 6: Tối ưu lại bài toán -> vì cái else dưới cùng nó bao gồm cả 2 trường hợp phía trên nên chung ta phải ưu tiên lên đâu -> well Step 7: viết lại bài toán:

function printResultOfNumber(n) {
       if (n % 3 == 0 && n % 5 ==0) {
          console.log(' N chia het cho ca 3 va 5')
      } else if (n % 5 == 0) {
         console.log('N chi chia het cho 5')
      } else if (n % 5 == 0) {
        console.log(' N chia het cho ca 3 va 5')
      } else {
         console.log(' N khong nhu mong muon, borrow')
     }  
  } 

Step 8: nghiệm lại bài toán: oh, mình đã thiếu 1 trường hợp ko chia hết, vậy bài toán đúng phải có 4 trường hợp. => good Step 9: Kiểm thử và chạy: lấy các trường hợp như sau: n = 3, 5, 12, 11 Step 10: tối ưu, dùng toán tử 3 ngôi ư, cứ thử đi nhé, nhưng mà toán tử 3 ngôi chỉ nên dùng cho 2 trường hợp thôi => rút ra kết luận từ 2 bài trên, bài 1 hàm có return vậy nó sẽ trả về 1 kết quả, nhưng hàm 2 thì sao? ko cần giá trị return -> vậy hàm có 2 loại là có giá trị trả về và không nhé. ok?

[HoVanBa123]

thank you. great.

[HoVanBa123]

trong thân function có một dòng code, có thể bỏ được return và ngoặc nhọn const maxOfTwoNumber = (a, b) => a > b ? a : b.

[thaiphuongit25]

Right

On Sun, Oct 11, 2020, 13:33 HoVanBa123 notifications@github.com wrote:

trong thân function có một dòng code, có thể bỏ được return và ngoặc nhọn const maxOfTwoNumber = (a, b) => a > b ? a : b.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HoVanBa123/project_kanban_hovanba/issues/7#issuecomment-706657872, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOCQEEI6ZVIPBXMOHROUFNLSKFGR5ANCNFSM4SKX34OA .

[HoVanBa123]

const maxNumber = n => { if (n % 3 == 0) { n % 5 == 0 ? console.log('N chia hết cho 3 và 5') : console.log('N chia hết cho 3') } else { n % 5 != 0 ? console.log('N không chia hết cho 3 và 5') : console.log('N chia hết cho 5') } } code tối ưu.

[thaiphuongit25]

tên biến ko phải maxNumber, code trên cũng ok, tuy nhiên người đọc sẽ khó hiểu.

[HoVanBa123]

uhm, lúc nãy lấy tên biến cũ, quên đổi.

[thaiphuongit25]

@HoVanBa123 Ok, áp dụng phương pháp trên và làm mấy vị dụ trong này: phân tích kỹ, sau đó code giả lập rồi mới xem code chi tiết. https://codelearn.io/sharing/30-cau-phong-van-javascript-phan-1

[thaiphuongit25]

Một vài câu hỏi quan trọng :https://viblo.asia/p/mot-so-cau-hoi-meo-co-the-gap-khi-phong-van-frontend-developer-phan-1-RQqKLvPpl7z

List câu hỏi phỏng vấn html css:https://www.phongvanit.com/ky-nang/htmlcss-1007

[thaiphuongit25]

https://vn.bitdegree.org/huong-dan/hoc-css/#heading-4

[HoVanBa123]

ok, thank you.

[thaiphuongit25]

css, scss: https://xuanthulab.net/su-dung-sass-scss/

[thaiphuongit25]

Tóm tắt bootstrap: https://xuanthulab.net/bootstrap-css-framework/

[thaiphuongit25]

Git thông dụng: https://xuanthulab.net/git-va-github/

[thaiphuongit25]

reactjs: https://viblo.asia/p/nhung-cau-hoi-thuong-gap-khi-phong-van-react-js-va-dap-an-phan-1-XL6lAnAR5ek

[thaiphuongit25]

https://vn.bitdegree.org/huong-dan/huong-dan-reactjs/ -> tham khảo một số cái thôi, viết ko chuẩn lắm

[thaiphuongit25]

https://www.phongvanit.com/ky-nang/reactjs-1028

[thaiphuongit25]

cấu trúc dữ liệu number, string, array, map, set. map: dạng key, value, trong đó 1 object key phải la duy nhất. set: trọng object value phải là duy nhất

[thaiphuongit25]

[ { id: 1, name: 'phuong', name: 'abc'},{ id: 1, name: 'phuong'}, {id: 2, name: 'abc'}]

[thaiphuongit25]

result: [1, 2]

[thaiphuongit25]

jquery thường dùng trong dự án code js thuần, ví dụ trong php -> file index.php.blade, ruby -> index.erb không dùng chung jquery và reactjs -> vì jquery thao tác trên dom thật, nên nó sẽ bị xung đột

[thaiphuongit25]

Tư duy thiết kế

• Ai sử dụng hệ thống này
• Hệ thống này tương tác với hệ thống nào

[thaiphuongit25]

Trong tự nhiện có 3 mối quan hệ chính: 1 - 1 1 - N N - N Ví dụ 1 - 1 : 1 user có 1 profile: chẳng hạn 1 user có 1 ảnh => thì nó có 2 bảng tương ứng User và profile. Bảng chi tiết: User: id, name -> id là khóa chính Profile: id, user_id, image -> user_id là khóa ngoại ví dụ: User 1, ba 2, phuong Profile 1, 1, ba.png 2, 2, phuong.png

[thaiphuongit25]

Mối quan hệ 1 - n: Ví dụ 1 project có nhiều task lớn là Board: Bảng: Project: id, name Board: id, project_id, name Mối quan hệ n - n: Một kỹ sư (user) sẽ tham gia nhiều sự án tức là 1 - n, một dự án (project) có có nhiều kỹ sư tham gia tứ là 1 - n Trong thức tế, chung ta ko thể xác định được rõ mối quan hệ này: Vậy chúng ta phải tách ra thành 2 mối quan hệ 1 - n Ví dụ như yêu cầu trên: thì ta phải dùng 1 bảng phụ là user_project

[thaiphuongit25]

• ở constest -> cv việc làm, tính toán hồ sơ công việc, có sử dụng excel- > vpa -> tạo nhiều seed, tính toán số liệu nhiều file seed. seed 1, => tổng chi phí của công trình a, seed 2 ct b: for nhiều seed xong công lại

Trong tg đó e cũng có tìm hiểu về html, css, lưu trử dùng mysql.

[thaiphuongit25]

• Lý do vì sao:
• Vì sao chọn front end:
• Làm dự án có sủ dụng figma

[thaiphuongit25]

giới thiêu bằng tiếng anh: I’m Ba. I’m 27 years old. I’m from Nghe An. I’m a software engineer, I had more than 6 months of software development experience. I graduated from the University of Transport and Communications, Hanoi, and after I joined in some companies as cotescon with a technical staff position And nearly, I have been joined in the JKH team as a from-end developer position. I’m willing to learn new technology, web development skills.

[thaiphuongit25]

for (i = 0, i < 10, i++) { if (a[i] == n) { console.log("ok") break } }

[thaiphuongit25]

Phần cuối: các loại join trong mysql:

• Phải nắm kỹ inner join, left join, right join Link : https://gitiho.com/blog/huong-dan-cac-kieu-cua-lenh-join-trong-mysql-inner-outer-left-right-cross.html

Vào Th 3, 13 thg 10, 2020 vào lúc 07:41 HoVanBa123 < notifications@github.com> đã viết:

ok, thank you.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HoVanBa123/project_kanban_hovanba/issues/7#issuecomment-707416684, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOCQEEP2LOSEX2SPSXRU5YLSKOO5DANCNFSM4SKX34OA .

[thaiphuongit25]

git : các lệnh cơ bản khi làm gì: khởi tạo git: git init

• git clone link

• cách nhánh chính: master (release ->phat hành sp) -> develop trước khi làm 1 task checkout về nhánh develop -> sau đó git pull origin develop => dể cập nhật code mới nhất tạo nhánh mới: có tên featute-ten_task , câu lệnh git checkout -b featute-ten_task or featute/ten_task git add -a ( lấy tất cả những file thay đổi) git add ten file git add . ( tương đương git add -a) git commit -m "login" git push origin ten nhanh dang lam (featute-ten_task) tạo pull request để review code

• test là tự test sau khi review ok thì merge develop -> tester nó test trên nhánh này câu hỏi: lỡ tay push lên thì làm sao sửa code sửa file sau đó git add , git commit, git push

• nhược là tạo nhiều commit trên 1 file cách khác git add, git commit --am , git push origin ten nhanh -f

đã dùng rebase bao giờ chưa: merge và rebase rebase -> hợp nhiều commit của nhiều nhánh lại với nhau -> thì nhanh đẹp hơn

• lấy lịch sử git git log --oneline

Dự án làm gì: Nó là 1 phần mềm nội bộ quản dự án trong ty, công việc nó tựa như trello Dự án dùng công nghệ gì backend: nodejs, front end: reactjs -> bootstrap reactjs 4, db: mysql Project front end: có dùng gì: reactjs, bootstrap, scss, build dùng webpack. source có build sẵn rồi webpack -> công cụ build source ( tổng hợp nhiều file css -> thành 1, nhiều js -> thành 1) Lênh chạy: yarn run dev (npm or yarn) Làm gì trong dự án: setting -> thằng với quyền admin có sẽ có quyền load người vào project ui có gì: setting/projects/1 tên project, danh sanh user [ {id: 1, name: 'phuong'}, {id: 2, name: 'ba'} ]

params : {idProject: 1, user_id: [1, 2]}

• thêm task, subtask

• giờ dùng datepicker -> dùng chọn ngày giờ dùng thư viện mdbootsrap 4: https://mdbootstrap.com/

• Design db: thêm một số trường hoặc bảng sau khách hàng review

• Cookie, session, localStore: đăng nhập lưu token vào cookie

• Restfull api: restfull là cách tổ chức url gồm 5 method chính: get -> lấy dữ liệu vidu: localhost:8080/users -> lấy tất cả user post: tạo mới dữ liệu -> localhost:8080/users/create put: cập nhật mới dữ liệu -> localhost:8080/users/1/edit delete: xóa dữ liệu: vd: localhost:8080/users/1 path : cập nhật 1 trường riêng lẽ