Eloquent JavaScript: Giới thiệu hiện đại về lập trình

📚 Tóm tắt nội dung

Hướng dẫn toàn diện về lập trình hiện đại bằng JavaScript. Khóa học bao gồm các nguyên lý cơ bản của lập trình, quy định ngôn ngữ JavaScript, tích hợp với trình duyệt web và phát triển phía máy chủ với Node.js, bao gồm năm ứng dụng thực tế.

Một cuộc lặn sâu và tinh tế vào trái tim lập trình JavaScript.

Tác giả: Marijn Haverbeke

Lời cảm ơn: Được hỗ trợ bởi 454 người tài trợ tài chính; minh họa bởi Wasif Hyder, Max Xiantu, Margarita Martínez, José Menor, Jim Tierney, Dyle MacGregor, Jeff Avallone, Thomas Palef, và Antonio Perdomo Pastor.

🎯 Mục tiêu học tập

1. Định nghĩa chương trình là gì và giải thích các mức độ trừu tượng khác nhau trong ngôn ngữ máy tính.
2. Sử dụng số và toán tử toán học trong JavaScript để tạo ra giá trị.
3. Khai báo và cập nhật biến, tuân thủ quy tắc đặt tên và giới hạn từ khóa được bảo lưu.
4. Thực hiện luồng điều khiển mạnh mẽ bằng do vòng lặp, for vòng lặp và câu lệnh switch, đồng thời duy trì mã sạch nhờ thụt đầu dòng và ghi chú.
5. Định nghĩa và gọi hàm bằng nhiều cách viết khác nhau, xử lý tham số, đối số tùy chọn và phạm vi ngữ nghĩa lồng ghép.
6. Áp dụng các khái niệm chức năng nâng cao như đệ quy, đóng gói (closures) và ngăn xếp gọi để giải các bài toán thuật toán phức tạp.
7. Sử dụng các phương thức đặc biệt cho đối tượng và mảng để quản lý cấu trúc dữ liệu phức tạp và chuỗi ký tự.
8. Triển khai các hàm cấp cao (filter, map, reduce) để trừu tượng hóa logic và kết hợp các phép biến đổi dữ liệu.
9. Điều hướng và thao tác chuỗi prototype để tạo ra các thể hiện đối tượng có cấu trúc, tái sử dụng được và giao diện đa hình.
10. Triển khai giao diện đa hình để xử lý trực quan hóa dữ liệu phức tạp (bảng).

🔹 Bài học 1: Cơ bản JavaScript và Cấu trúc chương trình

Tổng quan: Bài học này giới thiệu những khái niệm nền tảng của lập trình bằng JavaScript, từ định nghĩa triết học về một chương trình đến các cơ chế thực tiễn của mã nguồn. Học viên sẽ khám phá cách dữ liệu được biểu diễn qua kiểu dữ liệu và bit, cách thao tác giá trị bằng toán tử, và cách cấu trúc chương trình bằng biến, biểu thức và câu lệnh. Bài học cũng đề cập đến các hành vi độc đáo của JavaScript như chuyển đổi kiểu tự động và đánh giá ngắn mạch.

Kết quả học tập:

• Định nghĩa chương trình là gì và giải thích các mức độ trừu tượng khác nhau trong ngôn ngữ máy tính.
• Sử dụng số và toán tử toán học trong JavaScript để tạo ra giá trị.
• Khai báo và cập nhật biến, tuân thủ quy tắc đặt tên và giới hạn từ khóa được bảo lưu.

🔹 Bài học 2: Hàm và Cấu trúc dữ liệu phức tạp

Tổng quan: Bài học này khám phá các khối xây dựng cốt lõi của lập trình có cấu trúc, tập trung vào luồng điều khiển nâng cao, kỹ thuật lập trình hàm và tổ chức dữ liệu phức tạp. Học viên sẽ thành thạo cách đóng gói logic bên trong hàm, quản lý tính khả kiến biến thông qua phạm vi và đóng gói (closures), và thao tác đối tượng thay đổi để phân tích dữ liệu thế giới thực như các tương quan thống kê.

Kết quả học tập:

• Thực hiện luồng điều khiển mạnh mẽ bằng do vòng lặp, for vòng lặp và câu lệnh switch, đồng thời duy trì mã sạch nhờ thụt đầu dòng và ghi chú.
• Định nghĩa và gọi hàm bằng nhiều cách viết khác nhau, xử lý tham số, đối số tùy chọn và phạm vi ngữ nghĩa lồng ghép.
• Áp dụng các khái niệm chức năng nâng cao như đệ quy, đóng gói (closures) và ngăn xếp gọi để giải các bài toán thuật toán phức tạp.

🔹 Bài học 3: Hàm cấp cao và Prototype

Tổng quan: Bài học này khám phá sự chuyển dịch từ thao tác dữ liệu cơ bản sang các mẫu lập trình chức năng và hướng đối tượng nâng cao trong JavaScript. Nó bao gồm việc lưu trữ dữ liệu hiệu quả bằng Maps và các đối tượng toàn cục, sức mạnh của hàm cấp cao để trừu tượng hóa hành động (lọc, chuyển đổi, tổng hợp), và cơ chế nền tảng của hệ thống đối tượng JavaScript, bao gồm prototype, hàm tạo (constructor) và đa hình.

Kết quả học tập:

• Sử dụng các phương thức đặc biệt cho đối tượng và mảng để quản lý cấu trúc dữ liệu phức tạp và chuỗi ký tự.
• Triển khai các hàm cấp cao (filter, map, reduce) để trừu tượng hóa logic và kết hợp các phép biến đổi dữ liệu.
• Điều hướng và thao tác chuỗi prototype để tạo ra các thể hiện đối tượng có cấu trúc, tái sử dụng được và giao diện đa hình.

🔹 Bài học 4: Hướng đối tượng và Quản lý lỗi

Tổng quan: Bài học này khám phá các mẫu hướng đối tượng nâng cao trong JavaScript, tập trung vào đa hình thông qua giao diện bố cục bảng và thiết kế một hệ sinh thái mô phỏng ("Sự sống Điện tử"). Bài học chuyển sang độ tin cậy phần mềm bằng cách đề cập đến "Chế độ nghiêm ngặt", kỹ thuật gỡ lỗi và tầm quan trọng của kiểm thử có cấu trúc để giảm thiểu các sai sót phổ biến của nhà phát triển.

Kết quả học tập:

• Triển khai giao diện đa hình để xử lý trực quan hóa dữ liệu phức tạp (bảng).
• So sánh kế thừa và kết hợp để xây dựng cấu trúc đối tượng mở rộng.
• Quản lý ngữ cảnh thực thi (this) trong các hàm cấp cao và phương thức đối tượng.

🔹 Bài học 5: Phù hợp mẫu và Chia nhỏ mã

Tổng quan: Bài học này đề cập đến hai yêu cầu song song trong lập trình hiện đại: xử lý dữ liệu chuỗi phức tạp và tổ chức mã nguồn thành các cấu trúc dễ bảo trì. Học viên sẽ học cách sử dụng Biểu thức chính quy (Regular Expressions) để mô tả và thao tác các mẫu văn bản, sau đó tìm hiểu về Chia nhỏ mã để cô lập mã nguồn, quản lý không gian tên và thúc đẩy tái sử dụng.

Kết quả học tập:

• Xây dựng và kiểm thử biểu thức chính quy bằng cú pháp literal và cú pháp constructor.
• Triển khai các kỹ thuật phù hợp mẫu nâng cao bao gồm nhóm, backtracking và lặp lại không tham lam (non-greedy).
• Áp dụng nguyên tắc thiết kế chia nhỏ để tránh làm bẩn không gian tên và tách rời các thành phần chương trình.

🔹 Bài học 6: Thiết kế ngôn ngữ và Môi trường Web

Tổng quan: Bài học này khám phá sự chuyển dịch từ thiết kế phần mềm có cấu trúc sang việc tạo ra một ngôn ngữ lập trình riêng biệt mang tên "Egg". Nó tiếp tục nối liền các khái niệm này vào môi trường Web, mô tả cách mạng, HTML và Mô hình đối tượng tài liệu (DOM) tạo nên giao diện lập trình cho trình duyệt. Học viên sẽ học cách quản lý độ phức tạp mã nguồn thông qua chia nhỏ và thao tác tài liệu web trực tiếp bằng JavaScript.

Kết quả học tập:

• Triển khai hệ thống module mạnh mẽ bằng hàm define và quản lý các phụ thuộc phức tạp.
• Xây dựng bộ phân tích và bộ đánh giá hoạt động cho một ngôn ngữ chuyên dụng, bao gồm cả xử lý phạm vi và hỗ trợ hàm.
• Giải thích kiến trúc Web, bao gồm TCP/IP, cấu trúc HTML và các hệ quả an ninh của môi trường sandbox trình duyệt.

🔹 Bài học 7: Sự kiện và Nền tảng tương tác

Tổng quan: Bài học này khám phá sự phối hợp giữa thao tác DOM, định dạng CSS và xử lý sự kiện phức tạp để tạo ra trải nghiệm web tương tác và trò chơi. Học viên sẽ học cách kiểm soát bố cục và hoạt ảnh, quản lý bản chất bất đồng bộ của đầu vào người dùng, tối ưu hiệu suất bằng kỹ thuật định thời, và kiến trúc một trò chơi nền lưới dựa trên nguyên tắc hướng đối tượng.

Kết quả học tập:

• Thao tác Bố cục và Kiểu dáng DOM: Sử dụng JavaScript để đọc kích thước phần tử, áp dụng kiểu cascading, và hoạt ảnh phần tử bằng vị trí CSS và lượng giác học.
• Thành thạo Quản lý sự kiện: Triển khai xử lý sự kiện nâng cao bao gồm kiểm soát lan truyền, ngăn hành động mặc định, và quản lý các sự kiện đặc biệt (bàn phím, chuột, cuộn, và tập trung).
• Tối ưu thực thi Script: Áp dụng Web Workers cho xử lý nền và sử dụng debouncing/throttling để quản lý các sự kiện tần số cao.

🔹 Bài học 8: Đồ họa Canvas và Giao thức Mạng

Tổng quan: Bài học này khám phá sự chuyển dịch từ hiển thị trò chơi dựa trên DOM sang API HTML5 Canvas hiệu suất cao, cùng với cơ chế cơ bản của vật lý nền tảng 2D. Học viên sẽ học cách triển khai logic trò chơi phức tạp bao gồm lực hấp dẫn và phát hiện va chạm, đồng thời nắm vững kỹ thuật vẽ theo hướng mệnh lệnh (imperative). Ngoài ra, bài học giới thiệu giao thức HTTP và đối tượng XMLHttpRequest để xử lý giao tiếp khách-chủ.

Kết quả học tập:

• Triển khai phát hiện va chạm theo lưới và chuyển động dưới tác động lực hấp dẫn trong môi trường trò chơi.
• Sử dụng API HTML5 Canvas để hiển thị đường đi, đường cong, hình ảnh và các tấm sprite động.
• Áp dụng các phép biến đổi tọa độ (thang đo, xoay, lật) và quản lý trạng thái ngữ cảnh bằng phương thức save và restore.

🔹 Bài học 9: Biểu mẫu nâng cao và Ứng dụng bền vững

Tổng quan: Bài học này khám phá các kỹ thuật phát triển web nâng cao, tập trung vào giao tiếp bất đồng bộ qua XMLHttpRequest và Promises, tương tác sâu với các trường biểu mẫu HTML, và lưu trữ dữ liệu phía client. Học viên sẽ học cách quản lý yêu cầu mạng với header tùy chỉnh và xử lý lỗi trong các luồng bất đồng bộ bằng cách xây dựng một ứng dụng vẽ tranh modular và một công cụ ghi chú bền vững.

Kết quả học tập:

• Cấu hình và thực thi yêu cầu mạng bất đồng bộ bằng XMLHttpRequest và dây chuyền Promise.
• Thao tác hành vi biểu mẫu phức tạp, bao gồm quản lý tập trung, vô hiệu hóa trường và xử lý tệp.
• Triển khai lưu trữ dữ liệu phía client bằng localStorage và sessionStorage để duy trì trạng thái ứng dụng.

🔹 Bài học 10: Phát triển phía máy chủ với Node.js

Tổng quan: Bài học này cầu nối khoảng cách giữa tương tác phía client nâng cao và logic phía máy chủ. Học viên sẽ trước tiên thành thạo các công cụ thao tác canvas phức tạp và các ràng buộc bảo mật trình duyệt trước khi chuyển sang môi trường Node.js để xây dựng máy chủ file bất đồng bộ và các ứng dụng web thời gian thực sử dụng polling dài và định tuyến RESTful.

Kết quả học tập:

• Triển khai các công cụ vẽ nâng cao (Đường thẳng, Xóa, Phun sơn, Rải màu) và quản lý bảo mật canvas (Tainting).
• Thực thi script phía máy chủ bằng Node.js, quản lý phụ thuộc qua NPM và xử lý I/O bất đồng bộ bằng callback và promises.
• Xây dựng máy chủ HTTP hoạt động, có khả năng thao tác file, xử lý yêu cầu JSON và cập nhật thời gian thực qua polling dài.