kiến thức Javascript cho người mới bắt đầu

Nanatu

Senior Member
Với chút exp ít ỏi tự học trên mạng từ các khác nhau của em, một phần vì share cho các ae mới học, một phần vì muốn trau chuốt kiến thức + học thêm những điều mới từ mọi người nên e viết blog này hi vọng giúp đỡ phần nào cho mọi người.
Giới thiệu sơ qua, e đang là sv năm 4 nên trình độ hầu như bằng 0 + lượng kiến thức có hạn vì thế có những thiếu xót chỉ mong mn đóng góp, bổ sung thêm. "Một cây làm chẳng nên non, 3 cây chụm lại có gì chết chùm''. Mỗi người đóng góp 1 ít thì chẳng bao lâu post hoàn thiện và ae đến sau sẽ nhàn hơn, học đc những điều đã chọn lọc + tinh túy :LOL: Thôi không bốc phét nữa, e vào ngay luôn lộ trình.
Mỗi lần update thì e sẽ link phần đó ở dưới.
(P/S: Bài 1, 2 e biết khá sơ sài, nói thật là 2 bài đấy không có gì nhiều nên chẳng biết viết ra sao, khuyên các bác nên học từ bài 3)
1.Javascript là gì?Code editor
2.Biến
3.Kiểu dữ liệu
4.Nói sâu về string và number
5.Toán tử
6. Array và Object (Mảng và đối tượng)
6.1 Array
6.2 Object
7. Function
8. Câu lệnh điều kiện( if else, switch)
9. Loops ( Vòng lặp)
10. Closure
11. Scope
12. Hoisting
13. Callback
14. setTimeout() và setInterval()
15. Event
16. DOM
17. IIFE
18. Strict mode
19. This
20. Bind() ,call() , apply()
21. ES6, 7
21.1 let, const
21.2 Arrow function
21.3 Classes
21.4 Destructuring, Spread
21.5 Modules
Trước có bác@cs_50i viết về js vừa ngắn gọn lại dễ hiểu, hồi mới học e cũng đọc post của bác ấy mỗi ngày, tiếc là drop mất =(( Link blog của bác@cs_50i: https://voz.vn/t/event-tang-title-huong-dan-hoc-javascript-tu-0-nang-cao.422145/

1.Javascript là gì?Code editor
Chắc nhiều bác trong đây bị thuốc rằng:" IT là vua của mọi nghành, sáng đến làm 1-2 tiếng xong task chiều ngồi code project ngoài, lương tháng chuẩn vozer. Chỉ cần học 1 khóa làm web 6 tháng thôi là đã trở thành winner''. Nhưng chỉ phác họa lại đường nét của trung tâm vẽ ra thì có mà làm thợ code.
Ba ngôn ngữ được dùng để làm nên 1 giao diện web hay còn gọi là Font-end(FE) phổ biến hiện nay là Html, Css và Javascript.

  • Html là công cụ thêm nội dụng + mô tả ý nghĩa cho bố cục
  • Css là cộng cụ trang trí(cỡ chữ, màu sắc, kiểu chữ,...)
  • Js tạo nên chức nặng động để user có thể tương tác với web.
    Lạc đề hơi xa, chúng ta cùng quay lại với chủ đề chính. Javascript là gì? Đầu tiên nó là 1 ngôn ngữ lập trình phổ biến hiện nay, tạo nên sự tương tác giữa user và trang web. Js là một trong những ngôn ngữ phải học nếu bạn muốn làm về Fe, Be hay Fulllstack.
    Code editor: Các bác cứ hiểu nôm na là nơi để viết code( text editor) là được. Ở đây, e sẽ dùng công cụ Vs code, còn về download + cài các extension nào để thuận tiện cho việc code thì ae lên gg tìm hiểu.
    P/s: Nói thêm 1 chút ngoài lề: Theo e nếu bác nào có nhiều time mà chưa từng học lập trình thì đừng nên học js trước, cứ làm 1 khóa C/C++ cho ổn để hiểu lập trình + hiểu đc logic trong lập trình là gì( Khuyến khích ae học C++, do C++ có oop sau học về classes trong js vừa nhàn lại dễ hiểu)
2. Biến
Như đã nói ở phần 1, JS là ngôn ngữ lập trình mà đã là ngôn ngữ lt thì sẽ có biến, khai báo ... Vậy biến là gì?
Ae cứ hiểu biến là các thùng chứa có tên, mà đã là thùng thì phải đựng vật gì đó, biến cũng vậy biến đựng giá trị mà ta gắn hoặc nhập vào cho nó.
Trước đây khi khai báo biến trong JS người ta thường sử dụng từ khó var, vì var dễ gây nhầm trong phạm vị sử dụng( scope)nên từ phiên bản ES6 người ta đã cho ra đời thêm let và const. Trong đó, const dùng để khai báo hằng tức là đồ dùng 1 lần, sẽ không thay đổi đc giá trị trong suốt chương trình.
Nên từ giờ khi báo e sẽ toàn sử dụng let với const, điều này cũng là thói quen của e từ hồi học js.
Các bác cứ hiểu nôm na là như vậy đã, còn về phạm vi sử dụng của chúng( scope) ta sẽ học trong bài sau.

Cú pháp khai báo biến: var variableName = "giá trị của biến";

Giờ các bác mở Vs code lên rồi gõ theo e.

const isName = 'son'; let age = 21; console.log(isName) //son console.log(age) //21 isName = 'Truong' age = 22 console.log(isName) //error console.log(age) //22

Dùng const để khai báo tên, let để khai báo tuổi nhưng khai update lại value thì isName bị lỗi. Điều đó chứng minh biến const chỉ được khai báo 1 lần và không update lại suốt thời gian chương trình chạy.
 
Last edited:
Kiến thức cũ, câu post. Có report, và dựa trên lịch sử hoạt động của user nên khoá thread.
Mọi thắc mắc có thể vào mục góp ý, khiếu nại.
 
Last edited:
3.Kiểu dữ liệu ( type)

Trước hết, các bác cần hiểu kiểu dữ liệu là gì? Theo google, kiểu dữ liệu là một cách phân loại dữ liệu cho trình biên dịch hoặc thông dịch hiểu chúng ta muốn sử dụng dữ liệu. Nói nôm na cho dễ hiểu thì cũng giống như trong tiếng việt phân loại chữ, số, ki hiệu,... thì trong lập trình cũng vậy cũng có number(số), sting(chuỗi), ...

Trong js phân chia làm 2 loại là: Kiểu dữ liệu nguyên thủy (Primitive Types) và kiểu dữ liệu không nguyên thủy (Reference Types). Nâng cao hơn là tham trị và tham chiếu. Cái này có lẽ e nên để phần sau, giờ nói về tham trị && tham chiếu có vẻ hơi nâng cao, k phù hợp với các bác mới học.

Trong kiểu dữ liệu nguyên thủy (Primitive Types) gồm:
  • Number
  • Sting
  • Boolean
  • Undefine
  • Null
  • Biglnt
  • Symblo
Kiểu dữ liệu không nguyên thủy(Reference Types) gồm:
  • Array
  • Object
  • Function
Phần Reference Types chúng ta sẽ học trong những bài sau, còn đối với Primitive Types chúng ta chỉ cần học 5 cái đầu ( 2 cái sau hầu như sẽ không dùng tới bây giờ). Giờ các bác mở Vs code lên nào, vừa học vừa code thì mới nhớ lâu
  • Number: Nghe tên là các bác biết ngay nó là kiểu gì. Nếu như bác nào học ngôn ngữ lt cơ bản thì sẽ biết có các kiểu int(chứa các số nguyên), float( số thực) ... Nhưng ở Js thì chỉ có number, number nó bao gồm tất cả các kiểu trên. Phần này đến đây thôi, number với sting e sẽ tách riêng ra làm 1 bài , vì 2 phần này khá là nhiều kiến thức cần nhớ
    Ví dụ:
    let a = 2;
  • Sting: Kiểu dữ chứa dữ liệu dạng text. Chú ý là khi khai báo kiểu sting ta phải sử dụng ngoặc đơn hoặc kép( Trong js không phân biệt ngoặc đơn hoặc kép nên các bác dùng cái nào cũng đc)
    Ví dụ:
    let name = 'Son'
  • Boolean: Kiểu dữ liệu đúng sai, chỉ nhận 2 giá trị là true(đúng) và false(sai). Kiểu này thường áp dụng trong câu lệnh điều kiện(if else,..)
    boolean.png


  • Undefined: Ở bài 2 ta đã học về biến,ta biết biến thường gắn giá trị. Nếu như không gắn giá trị cho biến thì sẽ như thế nào?
    1664511543880.png
Như ta thấy, khi log a ra thì đc kết quả là undefined.
Trong JS mặc định khi một biến được khai báo mà không gắn giá trị nào thì biến đó đc gọi là kiểu dữ liệu undefined, giá trị của nó cũng là undefined.
  • Null : Cũng giống như undefined, null cũng là một kiểu dữ liệu đặc biệt trong js. Null có nghĩa là không có gì
    1664512390188.png
Nhìn vào ví dụ trên, các bác thấy khi gắn a = null. Giá trị in ra là null nhưng khi kiểm tra kiểu dữ liệu của a thì hiện ra là object (e quên nói, muốn kiếm tra kiểu dữ liệu của 1 biến ta có thể sử dụng '' typeof + tên biến'').
Đến đây nhiều bác thắc mắc, tại sao typeof của null không phải là null như undefined mà là object. Học nâng cao 1 chút, đã là object thì add đc thuộc tính (proprety) nhưng null lại không làm đc, chẳng lẽ null là đối tượng không có gì, điều này thì vô lí. Mà null là kiểu dữ liệu nguyên thủy( Primitive Types), Primitive không add đc proprety thì đúng theo định nghĩa. Phần này có nhiều ý kiến trái chiều, các bác có thể lên stackoverflow gõ" why null is object in js'' để tham khảo thêm.

Quay lại với bài học, phần cuối của bài này ta sẽ nói về cách phân biệt giữa null và undefined:
Cách phân biệt dễ nhất là:
undefined - Biến được khai báo nhưng không được khởi tạo
null - Biến được khai báo và gắn gtri == null
 
4. Number và Sting
Tiếp theo, chúng ta sẽ nói về number và sting. Trước khi vào bài học, e có bổ sung một số kiến thức mà đáng ra học ở các bài sau nhưng ở bài này sẽ cần để giải thích dễ hiểu hơn, tất nhiên cũng sẽ lướt qua những kiến thức này.
Các bác biết chúng ta gắn giá trị cho biến thông qua toán tử gán ( dấu =), thế nhưng các bác đã nghĩ đến rằng khi muốn so sánh 2 biến với nhau thì chúng ta sẽ so sánh như nào hay chưa.
1664597529520.png

Chẳng lẽ lại như đoạn code trên, nếu như thế thì khác gì gán a cho b. Vì thế trong lập trình để so sánh 2 giá trị của 2 biến người ta dùng toán tử "==" (2 dâu bằng). Nhưng lỡ đâu 2 biến đó có giá trị bằng nhau nhưng type(kiểu dữ liệu) khác nhau thì sao?
1664596587261.png

Ở bài 2 ta đã học, giá trị sting luôn đặt trong ngoặc kép, ở ví dụ trên khi so sánh giữa 2 biến a và b bằng toán tử == ta được kết quả true. Tại sao lại true? Ví dụ trên hác gì so sánh xem 10kg vào 10m có bằng nhau hay không. Vì để tránh case trên xảy ra khi so sánh 2 biến ta cần so sánh thêm type của nó. Từ đó, Js cho ra đời toán tử === (3 dấu bằng) để so sánh nghiêm ngặt hơn. Trước khi so sánh value(giá trị) thì nó sẽ so sánh xem có cùng type hay không, nếu không trả về false ngay lập tức.

Quay lại với bài học hôm nay, chúng ta đến với phần đầu tiên trong bài là Number:
Ví dụ:
1664626761561.png

Ta thấy khi so sánh nghiêm ngặt 10 và 10,0 thì ta đc kq là true. Chứng tỏ rằng trong js lưu trữ dữ liệu các số dưới dạng phẩy , điều này cũng chứng minh vì sao ở bài 3 e nói rằng ở trong js chỉ có 1 kiểu dữ liệu số duy nhất là number.
1664626787949.png

Thật bất ngờ khi kết quả trả về là false đúng không? Vì Js lưu data dưới dạng 64bit nên nó k chính xác 100%. Các bác vào Vs code gõ ngay console.log(0.1 + 0.2) để hiểu vì sao đoạn code trên return ra false.
Bây giờ chúng ta đến với các phương thức khi làm việc với number, phần này e sẽ k code mà các bác hãy mở vs code ra vừa học vừa gõ nào:)) IT lí thuyết chỉ 1 phần, muốn nhớ và thạo thì chỉ có thực chiến nhiều :
  • Number.isFinite(): Trả về true hoặc false, mục đích là xem giá trị của số đã cho có hữu hạn hay
    VÍ dụ:
    1664626812861.png
  • Number.isInteger(): Trả về true hoặc false, mục đích là xem giá trị số đã cho có nguyên hay không
  • Number.parselnt(): Chuyển đổi chuỗi thành số nguyên
  • toFixed(): Làm tròn số thập phân
    Ví dụ
    1664626842288.png

    Ở ví dụ trên ta sử dụng toFixed để làm trong biến a tới số thập phân thứ nhất
  • toString(): Chuyển đổi từ number sang kiểu sting( số sang chuỗi)

Và còn nhiều ví dụ nữa, e chỉ lấy 5 cái mà mình hay dùng, các bác có thể chủ động lên gg để tìm hiểu thêm.

Nói nốt phần string rồi cùng nghỉ nào, bắt đầu từ tuần sau khá bận chắc 2-3 hôm e mới ra 1 bài:
Trước hết về cách khai báo, ở phần number e quên nói. Nói chung number và string giống, có 2 cách:
  • Cách 1: Khai báo thông thường, nhưng string có thêm cặp nháy đơn hoặc nháy kép
    Cách 2: Sử dụng từ khóa new. Ví dụ như : let name = new String('Sơn')
    Nhưng e khuyên các bác nên theo cách 1, ai học các ngôn ngữ khác rồi sẽ biết "new" nó phức tạp như nào, nó liên quan đến object chúng ta sẽ học trong các bài sau.Tại sao phải phức tạp hóa vấn đề nó lên trong khi có thể giải quyết 1 cách nhẹ nhàng + ngắn gọn.
    Tiếp đến sẽ là một số phương thức làm việc với String mà e hay dùng:
  • length: Đo chiều dài chuỗi, phương thức này phải nói là dùng quá nhiều. Ví dụ:
    1664626912924.png

    Kết quả trả về là 6, trong khi chỉ có 5 chữ cái, chắc sẽ có bác thắc mắc như vậy. Trong string khoảng trắng nó sẽ tính là 1 kí tự kể cả 2 đầu của chuỗi.
  • concat(): Nối 2 chuỗi với nhau
    Ví dụ
    1664625645252.png

    Chuỗi nào đc chấm tới concat thì sẽ đứng phía trước, như e nói ở trên khoảng trắng cũng là 1 kí tự nên để có khoảng trắng giữa 2 chuỗi ta sẽ thêm 1 chuỗi chứa khoảng trắng. Phương thức này sẽ k giới hạn nối bao nhiêu chuỗi cùng 1 lúc.
  • indexOf(): Tìm vị trí kí tự trong chuõi, trả về vị trí đầu tiên kí tự( lastIndexOf : trả về vị trí cuối cùng của kí tự cần tìm)
    Ví dụ
    1664626093469.png
  • slice : cắt chuỗi (a, b) vị trí đầu a, vị trí cuối b, có thể cắt từ trai sang phải, phả sang trái
  • replace : ghi đè, ví dụ muốn đổi js thành javascript. cú pháp xx.replace('js', 'javascript'), chỉ đổi đc kí tự vị trí xuất hiện đầu tiên. Muốn đổi all thì cú pháp(/js/g, 'javascript')
  • toUpperCase() : đổi tất cả chữ thành chữ hoa
  • toLowerCase(): đổi tất cả chữ thành chữ thường
  • trim() : loại bỏ khoảng trắng 2 đầu
Tất nhiên sẽ còn nhiều phương thức khác nữa nhưng e cảm thấy tạm thời dùng nhiêu đấy là đủ, các bác chủ động lên mạng tìm hiểu để biết thêm.
 
Back
Top