Lộ trình cho Developer: JavaScript cơ bản đến nâng cao

Khái niệm cơ bản

• Ghi nhật ký bảng điều khiển (console logging)
• Biến & Kiểu dữ liệu (sử dụng var)

• Số - Số nguyên & Số dấu phẩy động
• Chuỗi - Đối với văn bản
• Boolean - kiểu dữ liệu logic đúng / sai
• Không xác định (undifined) - Kiểu dữ liệu của biến không có giá trị
• Null - Không tồn tại
• JavaScript động: các kiểu dữ liệu được gán tự động
• Camel Case & Quy ước đặt tên

• Bình luận
• Mutation (Thay đổi dữ liệu trong biến) & Coercion (Chuyển đổi kiểu dữ liệu)
• Toán tử & Toán tử logic

• +, -, *, /,%
• <,> và <=,> = …
• So sánh các chữ cái theo Unicode ('a' <'b')
• typeof & (== & ===)
• Ưu tiên người vận hành (Operator Precedence) & Đa nhiệm (Multiple Assignments)
• Toán tử tốc ký

• Điều kiện: If else, nested If, if else if
• Toán tử bậc ba
• Chuyển đổi Tuyên bố
• Boolean Logic: &&, || ,!
• Giá trị Chân thực (Truthy) và Giả dối (Falsy)

• Falsy value: undefined , null , 0 , '', NaN
• Truthy values: tất cả những giá trị khác đều đúng khi bị ép buộc

• Vòng lặp (loops) & Lặp lại (iteration)
• Đối với vòng lặp

• Trong khi lặp lại
• Tiếp tục & Ngắt

• Xử lý lỗi

• Throw (đưa ra)
• Try (thử), catch (bắt)

• Strict mode ("use strict")

• Strict mode bắt một số blooper mã hóa phổ biến, đưa ra các ngoại lệ.
• Ngăn chặn hoặc đưa ra các lỗi khi các hành động tương đối "không an toàn" được thực hiện (chẳng hạn như giành quyền truy cập vào đối tượng toàn cục).
• Vô hiệu hóa các tính năng khó hiểu.

Functions (Hàm)

• Các hàm cơ bản (khai báo, trả lại dữ liệu)
• Function Statement (khai báo trực tiếp) and
• Function Statement trả lại Undefined on execution (if , while , function declaration)
• Function Expression (sử dụng biến)
• Function Expression luôn trả lại một giá trị (typeof, variable function, 2+3)
• Default Parameters
• Callback Functions - hàm dưới dạng đối số & trả lại hàm từ hàm
• IIFE - Immediately Invoked Function Expression (biểu thức hàm được gọi ngay lập tức)
• chứa một hàm ẩn danh trong dấu ngoặc nhọn và sau đó gọi nó cùng một lúc
• chỉ có nội dung được trả về là có thể truy cập, mang tính trừu tượng và được đóng gói.
• Closures
• Một hàm bên trong luôn có quyền truy cập vào các biến và tham số của hàm bên ngoài của nó, ngay cả sau khi hàm bên ngoài đã trả về.
• Nó hoạt động vì Chuỗi phạm vi (scope chain) là một con trỏ, vì vậy ngay cả khi hàm đã trả về trong ngăn xếp thực thi, chuỗi phạm vi vẫn có quyền truy cập vào các biến của hàm bên ngoài.
• Argument Object
• Inbuilt String methods - phương pháp chuỗi sẵn có (indexOf , startsWith, substring)
• Inbuilt Number Methods - phương pháp số sẵn có (MATH object)
• Một số hàm Inbuilt hữu dụng khác:
• Date function
• Split & Join function
• Set timeout
• ParseInt

Arrays (Mảng)

• Basic Arrays (declaration)
• New Array () Syntax
• Array Properties : length , index
• Array Methods : pop , push , shift , unshift
• Iterating Arrays : for...of , for...in , for each, map
• Searching Arrays : indexOf , find , findIndex
• Filtering arrays : filter , reduce
• Sorting Arrays : sort
• Altering Arrays : split and join functions
• Các hàm Arrays hữ dụng: splice , slice , concat , reverse , every , some

Objects & Properties (Đối tượng & Thuộc tính)

• Basic Objects (declaration , accessing , mutating)
• new Object () Syntax
• Hàm trong objects (methods)
• Prototypes & Prototype chains (Nguyên mẫu và chuỗi nguyên mẫu)
• Prototypes là methods của objects có thể được kế thừa
• Mỗi đối tượng được kế thừa có thể truy cập vào nguyên mẫu cha mẹ của nó
• Vì thế, chúng ta viết các phương thức đó trong nguyên mẫu mà chúng ta muốn các đối tượng khác kế thừa
• Nguyên mẫu của hàm tạo (constructor) cũng là nguyên mẫu của tất cả các phiên bản của nó
• Chúng ta có thể kiểm tra nguyên mẫu, sử dụng object.property hoặc object.__proto__
• hasOwnProperty cho chúng ta biết thuộc tính đã được kế thừa hay chưa
• instanceOf có thể được sử dụng để kiểm tra xem cái gì là trường hợp (instance) của cái gì
• Constructors - được sử dụng như một bản thiết kế để tạo nhiều đối tượng
• Constructor Functions - được sử dụng để khởi tạo dữ liệu của đối tượng cho mọi trường hợp
• Tạo Constructor bằng Function
• quy ước là giữ chữ cái đầu tiên viết hoa của constructor
• các biến đối tượng được gán giá trị bằng cách sử dụng câu lệnh this
• đối tượng mới được tạo bằng cách sử dụng , new constructorName() và gán nó cho một biến
• Chúng ta có thể tạo một nguyên mẫu, sử dụng , object.prototype
• Chúng ta có thể kế thừa các hàm tạo khác bằng cách sử dụng phương thức call với các tham số của hàm tạo mẹ
• Các trình tạo cũng có thể được tạo bằng cách sử dụng Object.create , nơi chỉ định nguyên mẫu đầu tiên và sau đó chỉ định dữ liệu
• Object.create(parent.prototype) có thể kế thừa nguyên mẫu của nguyên mẫu mẹ đến nguyên mẫu con
• Primitives (Nguyên thủy) & Object
• Primitives trực tiếp nắm giữ dữ liệu (number , strings)
• Objects trỏ dữ liệu đến các object khác (objects, arrays)
• Trong JavaScript, hầu như tất cả mọi thứ đều là Object
• Primitives có thể được chuyển đổi thành các đối tượng bằng cách sử dụng autoboxing khi các phương thức như string.length được thực thi
• Mọi thứ khác đều là object, Arrays, Functions, Objects...
• Hai objects nếu chúng chiếm cùng không gian và vị trí trong bộ nhớ, chúng sẽ không bằng nhau bất kể các khóa và thuộc tính.
• Bind, Call & Apply
• Call có thể được sử dụng để cung cấp cho một con trỏ khác và gọi hàm ngay lập tức
• Apply, giống như lệnh gọi, nhưng các đối số chỉ có thể được truyền dưới dạng mảng
• Bind, đặt đối số này và các đối số khác cho hàm, sau đó đưa ra các hàm để nó có thể được gọi với các đối số đó sau này

Document Object Model (DOM)

• DOM
• biểu diễn có cấu trúc của HTML
• DOM kết nối các trang web với các tập lệnh như JS
• đối với mỗi hộp HTML, có một đối tượng trong DOM mà chúng ta có thể truy cập và tương tác cùng
• Phương thức DOM - querySelecor, getElementById
• Trình xử lý sự kiện - lưu trữ, trình nghe giao diện người dùng (chuột)
• Bộ nhớ dữ liệu CRUD - bộ nhớ cục bộ
• window.location - gán, băm
• window - chiều rộng bên trong, chiều cao bên trong, bảng điều khiển, tài liệu, addeventlistner (để hoạt động trên nhiều tab)

ES6+

• let & const
• chỉ có phạm vi bị chặn (bất kỳ khối if, while nào), trong khi var bình thường chỉ được xác định phạm vi chức năng
• không thể được sử dụng trước khi khai báo, trong khi var cho một giá trị không xác định
• IIFE có thể được tạo trong es6, chỉ trong một khối {} không có biến
• Template Strings
• Arrow Functions
• Destructuring : { name , length } = object , [name , length] = array
• Spread Operator : spread array , objects
• Rest Parameters
• Maps: giống như đối tượng, nhưng các phím có thể là số, có chức năng bất cứ thứ gì
• chúng ta có thể lặp lại chúng
• functions : get,set, size , has, delete, clear, entries
• Class: cú pháp “mật ngọt” cho es5 constructor và inheritance
• Class Constructor
• Class methods
• Subclasses , Super & Extends
• Getters & Setters

Asynchronous JavaScript (JavaScript không đồng bộ)

• Các hàm không đồng bộ có thể chạy ngầm
• Yêu cầu và phản hồi HTTP (Cách cũ)
• XMLhttprequest , readystatechange
• readyState, open, send
• Promises
• Đối tượng theo dõi xem một sự kiện nhất định đã xảy ra hay chưa
• Xác định điều gì xảy ra sau sự kiện
• Triển khai khái niệm về giá trị tương lai mong đợi
• 4 giai đoạn = Pending -> Settled/Resolved -> Fulfilled, Rejected
• Kiểm tra: resolve, reject,
• Thực hiện Actions sử dụng .then & .catch
• Promise chaining
• Async/Await cách thay thế để tiếp thu các promises
• chúng ta có thể sử dụng response promise được đưa ra bằng cách chờ đợi để kiểm tra và bắt được các lỗi.
• Fetch Api - đưa ra các promise có thể được sử dụng bằng Async / await hoặc promise
• Axios - thay thế cho tìm nạp, trả về trực tiếp dữ liệu trong JSON
• API - Application Programming Interface (Máy chủ từ xa, có một phần hoạt động như API)
• JSON - Ký hiệu đối tượng JavaScript (hàm json có sẵn trong js)
• AJAX - Javascript và XML không đồng bộ
• CrossOrigins

 Hế bài! Các liệu kê bên trên mới chỉ là bước khởi đầu trong hành trình của bạn trong JavaScript, luôn có rất nhiều điều để khám phá, hãy bắt đầu tìm hiểu và thực hành chi tiết các hạng mục bên trên nhé. Chúc bạn sớm trở thành “dân chuyên” JavaScript trong thành phố!

Học thêm về Java qua khóa học lập trình Java tại T3H và tham khảo thêm các khóa học lập trình khác bạn nhé!

Nguồn: https://intech.vietnamworks.com/