Chương 1. Tổng quan về JavaScript
Chương này sẽ giới thiệu về ngôn ngữ lập trình JavaScript, cũng như thiết lập môi trường để lập trình với ngôn ngữ này. Chúng ta cũng sẽ làm quen với việc lập trình và viết một số chương trình bằng JavaScript.
Chương này đề cập tới các nội dung sau:
Lập trình là gì?
Lịch sử của JavaScript
Các công cụ cần thiết để lập trình với JavaScript
Cài đặt Node.js
Chạy JavaScript ở chế độ dòng lệnh
Chương trình JavaScript đầu tiên
JavaScript trong trình duyệt web
Tương thích ngược (graceful degradation) và tối ưu từng bước (progressive enhancement)
Một chương trình JavaScript phức tạp hơn
Làm một dự án đơn giản
1.1 Lập trình
Lập trình là chỉ dẫn cho máy tính làm việc theo ý bạn.Hiểu một cách đơn giản, chương trình máy tính là một chuỗi các chỉ dẫn, giúp máy tính biết cách thực hiện một công việc. Tuy nhiên, không may là máy tính không thể hiểu được ngôn ngữ của con người, chúng chỉ biết tới những con số 1 và 0. Con người đã viết ra các chương trình đầu tiên cho máy tính bằng các thẻ đục lỗ (punched card), muốn biểu diễn số 1 thì đục một lỗ, nếu không đục lỗ thì là số 0.
Các chương trình máy tính đầu tiên được viết bằng mã máy (machine code) và hợp ngữ (assembly). Đây là các ngôn ngữ lập trình bậc thấp (low-level programming language), gắn liền với phần cứng máy tính, rất khó để lập trình, mã nguồn khó hiểu và phụ thuộc vào kiến trúc của tập lệnh máy tính. Tuy nhiên, nếu bạn quan tâm tới tốc độ xử lý của chương trình thì mã máy hoặc hợp ngữ là lựa chọn tốt nhất.
Ngược lại, các chỉ dẫn (lệnh) trong ngôn ngữ lập trình bậc cao có tính trừu tượng nhiều hơn (gần với ngôn ngữ giao tiếp của con người hơn), điều này giúp con người có thể đọc và viết mã dễ dàng hơn. Chúng ta có thể sử dụng các ngôn ngữ như C, C++, hoặc Java để viết các chương trình, sau đó biên dịch chương trình thành mã máy và thực thi. Chương trình viết bằng các ngôn ngữ này thường chạy rất nhanh, do vậy, nó thích hợp cho các phần mềm thương mại, hoặc các chương trình trò chơi video cần tốc độ xử lý cao. Hầu hết các chương trình ứng dụng di động (native app) cũng được viết bằng các ngôn ngữ lập trình bậc cao.
Ngôn ngữ kịch bản (scripting language) cũng là ngôn ngữ lập trình bậc cao, chúng là ngôn ngữ kiểu thông dịch (interpreted), nghĩa là khi chạy chương trình chúng mới được dịch sang mã máy. Mặc dù các trình thông dịch (interpreter) đang ngày càng phức tạp hơn, xóa dần lằn ranh phân biệt giữa ngôn ngữ lập trình kiểu thông dịch và biên dịch, nhưng các chương trình viết bằng ngôn ngữ lập trình kiểu thông dịch vẫn có tốc độ xử lý chậm hơn so với kiểu biên dịch.
1.2 Về JavaScript
Trong quyển sách này, chúng ta sẽ học về ngôn ngữ lập trình JavaScript, thường được gọi là ngôn ngữ của web.
Gần như tất cả các trình duyệt đều có thể chạy JavaScript, nhờ đó, nó trở thành một trong những ngôn ngữ lập trình phổ biến nhất thế giới. Để học JavaScript, đơn giản, bạn chỉ cần một trình soạn thảo văn bản thô (text editor) và trình duyệt web là đủ. Với JavaScript, bạn rất dễ để làm quen, nhưng rất khó để hiểu hết các tính năng của nó, bởi đây là một ngôn ngữ có nhiều tính năng độc đáo và thú vị. Tuy nhiên, khi bạn đã thành thạo với nó rồi, thì bạn sẽ thấy nó là một ngôn ngữ ấn tượng, linh hoạt và có thể tạo ra các ứng dụng lớn.
JavaScript là ngôn ngữ kịch bản, bậc cao, được biên dịch và thông dịch tại thời điểm thực thi. Do đó, nó cần có chương trình dịch (engine, gọi tắt là trình dịch) để thông dịch mã nguồn và thực thi nó. Các trình dịch này có trong các trình duyệt web như Firefox, Chrome hoặc Safari. Ngoài trình duyệt, bạn cũng có thể sử dụng Google V8 để thực thi mã JavaScript. Các trình thực thi JavaScript hiện đại có lồng kĩ thuật biên dịch động (hay biên dịch Just-In-Time, gọi tắt là JIT) vào quá trình thông dịch, giúp chương trình chạy nhanh hơn.
JavaScript cũng là một ngôn ngữ động (dynamic language), vì vậy trong lúc thực thi chương trình, nhiều thành phần của chương trình vẫn có thể thay đổi, nhiều thao tác liên quan đến quá trình thông dịch/biên dịch vẫn được thực hiện (như kiểm tra kiểu dữ liệu của biến, chúng ta sẽ tìm hiểu ở phần sau). Ví dụ với ngôn ngữ C++ thì những thao tác này phải được hoàn thành trong giai đoạn biên dịch mã nguồn.
1.3 Lịch sử JavaScript
Ban đầu, hệ thống web (WWW) chỉ gồm các trang web được kết nối với nhau bằng các liên kết (hyperlinks). Tuy nhiên, người dùng thì lại muốn tương tác được với các trang web. Vậy là Netscape (một công ty cung cấp trình duyệt thời kỳ đầu) đã yêu cầu Brendan Eich, là một nhân viên công ty, phát triển một ngôn ngữ lập trình mới cho trình duyệt Navigator của họ. Yêu cầu này phải được thực hiện gấp rút vì sự cạnh tranh gay gắt giữa Netscape và Microsoft.
Chỉ trong 10 ngày, Eich đã tạo ra được một ngôn ngữ lập trình mới (mặc dù mới chỉ ở dạng bản mẫu - prototype). Để làm được như vậy, anh ấy đã vay mượn nhiều thành tố từ các ngôn ngữ khác, gồm AWK, Java, Perl, Scheme, HyperTalk và Self. Mặc dù đây là một thành tích đáng nể, tuy nhiên, do áp lực buộc phải ra mắt sớm đã dẫn tới ngôn ngữ vẫn có những điểm kỳ quặc và mắc các lỗi mà cho đến tận bây giờ vẫn hầu như không thể khắc phục được một cách trọn vẹn.
Khi mới được tạo ra, họ đặt tên ngôn ngữ này là Mocha, sau đó đổi tên thành LiveScript, rồi lại được đổi tên thành JavaScript để “ăn theo” sự nổi tiếng của ngôn ngữ Java do Sun Microsystems phát triển. Thoạt nghe cái tên JavaScript, mọi người thường tưởng đây là bản rút gọn của ngôn ngữ Java. Tuy nhiên, hai ngôn ngữ này không liên quan gì đến nhau, dù cú pháp của JavaScript cũng có những điểm tương đồng với Java.
JavaScript xuất hiện lần đầu trong trình duyệt Navigator (ver 2.0) vào năm 1995. Một năm sau, Microsoft đã phân tích hoạt động của JavaScript (reverse-engineered - phân tích chương trình để hiểu cấu trúc, do không có bản mã nguồn gốc) để tạo ra một phiên bản riêng của họ, đặt tên là JScript để tránh vi phạm bản quyền với tên Java của Sun Microsystems. JScript được tích hợp vào trình duyệt Internet Explorer (ver 3.0), nó gần như giống hệt JavaScript, cả các lỗi và các điểm kỳ quặc. JScript có thêm một số tính năng chỉ dành riêng cho Internet Explorer. Thời điểm này, Microsoft cũng tạo ra một ngôn ngữ kịch bản khác cho Internet Explorer có tên là VBScript.
JavaScript (và JScript) ngay lập tức nổi tiếng. Đây là ngôn ngữ dễ học, dễ tiếp cận, do vậy nó đã dẫn đến sự bùng nổ trong việc tạo ra các trang web động, các trang web có tính tương tác. Thật không may, dễ tiếp cận cũng là một cái dở, kết quả là có nhiều người viết ra các đoạn mã mà chẳng biết nó dùng vào việc gì; hoặc người ta dễ dàng sao chép mã nguồn trên web và thường sử dụng sai cách, dẫn đến xuất hiện nhiều tình huống dở khóc dở cười trên các website.
JavaScript cũng bị mang tiếng xấu bởi người ta thường sử dụng nó để tạo ra các cửa sổ quảng cáo, xuất hiện đột ngột khi duyệt web, gây khó chịu cho người dùng; hoặc tạo ra các đoạn mã để âm thầm thăm dò, thu thập thông tin trình duyệt.
1.4 Cuộc đua giữa các trình duyệt
Tại thời điểm Netscape Navigator 4 và Internet Explorer 4 ra đời, JavaScript đã rất phổ biến. Microsoft đã quảng cáo rầm rộ về thuật ngữ Dynamic HTML (viết tắt là DHTML), ám chỉ về việc sử dụng JavaScript giúp HTML có khả năng tương tác và năng động hơn. Nhận thấy tiềm năng này, cả Netscape và Microsoft đều cố gắng bổ sung thêm những tính năng độc quyền mới, dẫn đến mỗi trình duyệt sử dụng một cú pháp lập trình riêng. Cuộc đua bổ sung thêm các tính năng mới cho trình duyệt được mọi người gán cho cái tên là “chiến tranh giữa các trình duyệt” (browser wars). Đáng tiếc, mặt trái của cuộc đua này là, với mỗi chức năng, các lập trình viên luôn phải viết 2 phiên bản mã nguồn cho mỗi trình duyệt. Các lập trình viên chuyên nghiệp thường coi JavaScript chỉ là một ngôn ngữ “chơi bời”, không phù hợp với các công việc lập trình nghiêm túc. Tuy nhiên, đây là nhận định không công bằng, vấn đề không phải là ngôn ngữ lập trình mà là cách sử dụng nó.
Cuối cùng, Microsoft đã thắng trong cuộc chạy đua, Internet Explorer đã trở thành trình duyệt vượt trội với nhiều ưu thế. Mọi người ngày càng quan tâm nhiều hơn tới các “tiêu chuẩn” (standard), phần lớn nhờ vào những nỗ lực của Dự án chuẩn hóa Web (Web Standards Project - WaSP). Các nhà phát triển và nhà cung cấp trình duyệt bắt đầu hợp tác và áp dụng các tiêu chuẩn do Hiệp hội web (W3C - World Wide Web Consortium) và ECMA đề ra.
Các trình duyệt mã nguồn mở như Firefox (ra mắt 2002), Safari (2003), Chrome (2008), đều hỗ trợ mạnh mẽ các tiêu chuẩn, điều này giúp các nhà phát triển có thể tạo ra các ứng dụng JavaScript tốt hơn, hoạt động nhất quán trên các trình duyệt khác nhau.
1.5 Web 2.0
Vào năm 2005, các trang Google Maps, Flickr và Gmail bắt đầu xuất hiện, chúng là các minh chứng cho khả năng tạo ra các ứng dụng web phong phú, các chức năng hoạt động giống như một Ứng dụng desktop của JavaScript. Cùng thời điểm này, Jesse James Garrett cũng đưa ra thuật ngữ Ajax, là viết tắt của Asynchronous JavaScript And XML. Ajax là kỹ thuật lấy dữ liệu từ máy server về máy client, chỉ cập nhật các thành phần có liên quan mà không tải lại toàn bộ trang web, trong khi vẫn cho người dùng tiếp tục tương tác với phần còn lại của trang. Kỹ thuật này giúp việc duyệt web được mượt mà hơn và đã được sử dụng rộng rãi trong các ứng dụng web 2.0. Do vậy, các lập trình viên chuyên nghiệp bắt đầu chú ý đến JavaScript nhiều hơn và nó bắt đầu được coi là một ngôn ngữ lập trình mạnh mẽ, linh hoạt, có khả năng tạo ra các ứng dụng web chất lượng cao.
1.6 Các tiêu chuẩn
Khi JavaScript được sử dụng để tạo ra các ứng dụng phức tạp hơn và các trình duyệt bắt đầu tuân theo các tiêu chuẩn, thì bối cảnh của JavaScript đã thay đổi. Một cuộc chạy đua mới giữa các trình duyệt lại bắt đầu, nhưng cuộc chạy đua lần này là “trình duyệt nào tuân thủ các tiêu chuẩn tốt nhất”. Bên cạnh đó cũng có sự cạnh tranh về tốc độ xử lý của các trình thực thi mã JavaScript trong các trình duyệt (JavaScript engine). Cuộc cạnh tranh này bắt đầu vào năm 2008, khi các kỹ sư của Google đã tạo ra trình thực thi mã có tên V8 trong trình duyệt Chrome. Nó chạy nhanh hơn khá nhiều so với các trình thực thi mã JavaScript trước đó. Các trình duyệt khác cũng tăng tốc độ xử lý của các trình thực thi mã để cạnh tranh với Google. Hiện nay, JavaScript đã chạy khá nhanh trong các trình duyệt, và việc cải thiện vẫn được duy trì theo thời gian.
1.7 HTML5
HTML5 là phiên bản mới nhất của ngôn ngữ HTML, tuy nhiên thực tế nó là một thuật ngữ bao trùm tất cả các công nghệ mới nhất đang được sử dụng trong lĩnh vực web. Nó bao gồm HTML, CSS3 và rất nhiều các API sử dụng JavaScript để tương tác với các trang web. Những nội dung này sẽ được đề cập chi tiết trong chương 10.
HTML5 đã được hoàn thiện vào năm 2014, và mọi người đề xuất năm 2016 sẽ đưa ra phiên bản 5.1. HTML5 đã nhanh chóng trở thành tiêu chuẩn phổ biến trong quá trình phát triển ứng dụng web. Trong đó, JavaScript là nhân tố chính góp phần làm cho lĩnh vực phát triển ứng dụng web trở nên thú vị hơn.
1.8 Node.js
Năm 2009, Ryan Dahl đã phát triển nền tảng Node.js (thường gọi tắt là Node). Nó cho phép chúng ta viết các ứng dụng phía server bằng JavaScript. Node hoạt động dựa trên trình thực thi mã V8 (V8 engine) của Google, cho phép tạo ra các ứng dụng web thời gian thực, chạy nhanh, khả năng xử lý mạnh mẽ chỉ bằng JavaScript. Dựa trên Node, người ta đã tạo ra nhiều ứng dụng và thư viện JavaScript không cần đến trình duyệt. Số người biết đến Node.js và sử dụng nó đã tăng lên nhanh chóng, điều này kéo theo ngày càng có nhiều người quan tâm và sử dụng JavaScript, cả trong và ngoài lĩnh vực web.
Sự phổ biến của Node.js đã dẫn đến một kỹ thuật lập trình mới có tên là Isomorphic JavaScript (hoặc Universal JavaScript). Ý tưởng là một đoạn mã JavaScript có thể chạy được ở cả phía client và phía server: nếu trình duyệt không thể chạy được đoạn mã, thì bên server sẽ chạy và gửi kết quả về client; nếu máy server không chạy được đoạn mã thì gửi đoạn mã đó về máy client để thực thi.
1.9 Các phiên bản của JavaScript
Năm 1996, Netscape và Sun Microsystem đã quyết định chuẩn hóa ngôn ngữ JavaScript, cùng với sự trợ giúp của Tổ chức quản lý các tiêu chuẩn có tên là ECMA (Hiệp hội nhà sản xuất máy tính châu Âu - European Computer Manufacturers Association). Ngôn ngữ JavaScript sau khi được chuẩn hóa sẽ có tên gọi là ECMAScript để tránh vi phạm nhãn hiệu Java của Sun. Nhưng điều này cũng gây thêm nhiều nhầm lẫn, nên cuối cùng cái tên ECMAScript được sử dụng như là một đặc tả (một tiêu chuẩn), còn tên ngôn ngữ lập trình thì vẫn là JavaScript.
Trong điều kiện lý tưởng, tiêu chuẩn ECMAScript yêu cầu tất cả các JavaScript engine phải thông dịch mã nguồn theo cùng một cách. Nhưng cách viết của đặc tả đôi khi rất khó hiểu, dẫn đến khi triển khai trong các engine sẽ có sai khác, kết quả là cùng một chương trình JavaScript nhưng sẽ cho ra kết quả khác nhau trên mỗi trình duyệt. JavaScript thường xuyên bổ sung các tính năng không có trong đặc tả của ECMAScript, ví dụ hàm alert().
Nhóm chịu trách nhiệm duy trì bộ đặc tả ECMAScript được gọi là Ủy ban kỹ thuật 39 (gọi tắt là TC-39). Nhóm này bao gồm đại diện của các nhà cung cấp trình duyệt phổ biến như Apple, Goolgle, Microsoft và Mozilla, cùng với các chuyên gia và đại diện của các công ty có quan tâm tới lĩnh vực phát triển ứng dụng web. Họ có các cuộc họp định kỳ để bàn về phương hướng phát triển của ngôn ngữ JavaScript.
Năm 1997, khi TC-39 thực hiện chuẩn hóa JavaScript, họ đã đặt tên là cho đặc tả này là ECMAScript phiên bản 1. Một năm sau đó, phiên bản 2 ra đời, nhưng không có nhiều thay đổi. Năm 1999, phiên bản 3 ra đời với nhiều tính năng mới.
Quá trình tạo ra phiên bản ECMAScript 4 đã gặp nhiều bế tắc do những bất đồng trong ủy ban TC-39 về hướng đi của ngôn ngữ. Một số thành viên cho rằng ngôn ngữ cần có thay đổi lớn để trở nên mạnh mẽ hơn, trong khi những thành viên khác lại nghĩ rằng nó chỉ cần những thay đổi nhỏ. Nhiều tính năng mới được đề xuất, nhưng thường được cho là quá tham vọng hoặc quá khó để triển khai trong trình duyệt. Sau nhiều năm bế tắc, cuối cùng phiên bản 4 đã bị hủy bỏ, nhóm làm việc đã bỏ qua phiên bản này và tập trung vào phát triển phiên bản 5. Họ đồng ý là bản đặc tả cần tinh gọn hơn, có thể triển khai được, và cuối cùng nó cũng được công bố vào 12/2009. ECMAScript 5 (viết tắt ES5) có thêm nhiều tính năng mới, nhưng vẫn ít tham vọng hơn nhiều so với phiên bản 4. Dù vậy, cũng phải mất một thời gian dài thì các JavaScript engine của trình duyệt mới hỗ trợ hết các tính năng này.
Sau khi ES5 được phát hành, ủy ban TC-39 đã đưa ra phương pháp làm việc mới, gọi là “Harmony”. Ý tưởng của Harmony là sẽ phác thảo tất cả các tính năng mong muốn cho các phiên bản JavaScript kế tiếp. Phải mất đến 6 năm để đưa hầu hết các tính năng này vào ES6, thậm chí có những tính năng đến ES7 hoặc các phiên bản sau mới được đưa vào.
Vào 2015, TC-39 đã quyết định áp dụng cách tiếp cận mới là sẽ xuất bản mỗi năm một bản đặc tả kỹ thuật, và tên của phiên bản sẽ là năm tương ứng. Như vậy các tính năng mới được phê duyệt năm nào thì sẽ đưa vào đặc tả của năm đó. Kết quả là phiên bản ECMAScript 6 được đổi tên thành ECMAScript 2015, nó được xuất bản vào 6/2015 với nhiều tính năng mới. Theo kế hoạch, các bản đặc tả sẽ được xuất bản vào tháng 6 hàng năm, như vậy các tính năng mới sẽ được thêm vào một cách đều đặn, thay vì thêm vào bất thường theo chu kỳ 5 năm hoặc nhiều hơn. Chỉ có ES2015 mới được thêm nhiều tính năng mới, phiên bản ES2016 chỉ được bổ sung thêm 2 tính năng mới so với phiên bản trước.
Trong sách này, chúng ta sẽ tìm hiểu và thực hành trên bản ES2015 hay ES6. Đồng thời cũng có các chú thích kèm theo, cho biết tính năng đó được thêm vào từ phiên bản nào.
Chúng tôi cũng giả định là bạn đang sử dụng trình duyệt web mới nhất (cố gắng cập nhật trình duyệt của bạn lên phiên bản mới nhất).
----
Thành viên nhóm dịch: nvteo, Triệu Quang Học, Võ Lâm Chí Vĩnh. [tham gia nhóm dịch]
-----
Cập nhật: 1/2/2024