JavaScript technologies overview
Trong khi HTML định nghĩa cấu trúc và nội dung của một trang web, và CSS thiết lập định dạng và giao diện, thì JavaScript bổ sung tính tương tác cho trang web và tạo ra các ứng dụng web phong phú.
Tuy nhiên, thuật ngữ chung "JavaScript" như được hiểu trong ngữ cảnh trình duyệt web bao gồm một số yếu tố rất khác nhau. Một trong số đó là ngôn ngữ lõi (ECMAScript), một phần khác là tập hợp các Web API, bao gồm DOM (Document Object Model).
JavaScript, ngôn ngữ lõi (ECMAScript)
Ngôn ngữ lõi của JavaScript được chuẩn hóa bởi ủy ban ECMA TC39 với tên gọi ECMAScript. "ECMAScript" là thuật ngữ cho tiêu chuẩn ngôn ngữ, nhưng "ECMAScript" và "JavaScript" có thể được sử dụng thay thế cho nhau.
Ngôn ngữ lõi này cũng được sử dụng trong các môi trường không phải trình duyệt, ví dụ như trong Node.js.
ECMAScript bao gồm những gì?
Trong số những thứ khác, ECMAScript định nghĩa:
- Cú pháp ngôn ngữ (quy tắc phân tích cú pháp, từ khóa, luồng điều khiển, khởi tạo object literal, ...)
- Cơ chế xử lý lỗi (
throw,try...catch, khả năng tạo các kiểuErrordo người dùng định nghĩa) - Kiểu dữ liệu (boolean, number, string, function, object, ...)
- Cơ chế kế thừa dựa trên prototype
- Các đối tượng và hàm tích hợp sẵn, bao gồm
JSON,Math, các phương thức Array,parseInt,decodeURI, v.v. - Strict mode
- Một hệ thống module
- Mô hình bộ nhớ cơ bản
Quy trình chuẩn hóa
Các phiên bản ECMAScript được ủy ban Đại hội đồng ECMA phê duyệt và xuất bản hàng năm như một tiêu chuẩn. Toàn bộ quá trình phát triển được công khai trên tổ chức GitHub Ecma TC39, nơi lưu trữ các đề xuất, văn bản đặc tả chính thức và ghi chú cuộc họp.
Trước phiên bản thứ 6 của ECMAScript (được gọi là ES6), các đặc tả được xuất bản vài năm một lần và thường được gọi theo số phiên bản chính — ES3, ES5, v.v. Sau ES6, đặc tả được đặt tên theo năm xuất bản — ES2017, ES2018, v.v. ES6 đồng nghĩa với ES2015. ESNext là một tên động dùng để chỉ phiên bản tiếp theo tại thời điểm viết. Các tính năng ESNext được gọi chính xác hơn là đề xuất, bởi vì theo định nghĩa, đặc tả chưa được hoàn thiện.
Bản snapshot được ủy ban phê duyệt hiện tại của ECMA-262 có sẵn ở định dạng PDF và HTML trên trang đặc tả ngôn ngữ ECMA-262 của Ecma International. ECMA-262 và ECMA-402 được duy trì liên tục và cập nhật bởi các biên tập viên đặc tả; website TC39 lưu trữ các phiên bản mới nhất, cập nhật nhất của ECMA-262 và ECMA-402.
Các tính năng ngôn ngữ mới, bao gồm việc giới thiệu cú pháp và API mới cũng như sửa đổi các hành vi hiện có, được thảo luận dưới dạng đề xuất. Mỗi đề xuất trải qua một quy trình 4 giai đoạn, và thường được các JavaScript engine triển khai ở giai đoạn 3 hoặc 4, từ đó có thể sử dụng rộng rãi.
Xem thêm mục ECMAScript trên Wikipedia để biết thêm thông tin về lịch sử ECMAScript.
API Quốc tế hóa
Đặc tả API Quốc tế hóa ECMAScript là phần bổ sung cho Đặc tả Ngôn ngữ ECMAScript, cũng được chuẩn hóa bởi Ecma TC39. API quốc tế hóa cung cấp đối chiếu (so sánh string), định dạng số, và định dạng ngày giờ cho các ứng dụng JavaScript, cho phép ứng dụng chọn ngôn ngữ và điều chỉnh chức năng theo nhu cầu của mình. Tiêu chuẩn ban đầu được phê duyệt vào tháng 12 năm 2012; trạng thái triển khai trong trình duyệt được theo dõi trong tài liệu của đối tượng Intl. Đặc tả Quốc tế hóa hiện nay cũng được phê chuẩn hàng năm và trình duyệt liên tục cải thiện việc triển khai của mình.
Tài nguyên liên quan
Có nhiều cách để bạn có thể tham gia hoặc theo dõi công việc hiện tại về Đặc tả Ngôn ngữ ECMAScript và Đặc tả API Quốc tế hóa ECMAScript cùng các tài nguyên liên quan:
DOM API
>WebIDL
Đặc tả WebIDL cung cấp liên kết giữa các công nghệ DOM và ECMAScript.
Lõi của DOM
Document Object Model (DOM) là một quy ước độc lập ngôn ngữ, đa nền tảng để biểu diễn và tương tác với các đối tượng trong tài liệu HTML, XHTML và XML. Các đối tượng trong cây DOM có thể được truy cập và thao tác bằng cách sử dụng các phương thức trên các đối tượng đó. Hiện nay, đặc tả DOM core được duy trì bởi WHATWG (thay thế phiên bản W3C). Nó định nghĩa các interface không phụ thuộc ngôn ngữ để trừu tượng hóa tài liệu HTML và XML thành các đối tượng, đồng thời định nghĩa các cơ chế để thao tác với sự trừu tượng hóa này. Bao gồm: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, và nhiều hơn nữa.
Từ góc độ ECMAScript, các đối tượng được định nghĩa trong đặc tả DOM được gọi là "host objects".
HTML DOM
HTML, ngôn ngữ đánh dấu của Web, được đặc tả theo cách dựa trên DOM. Được xây dựng trên các khái niệm trừu tượng được định nghĩa trong DOM Core, HTML cũng định nghĩa ý nghĩa của các phần tử. HTML DOM bao gồm các thứ như thuộc tính className trên các phần tử HTML, hoặc các API như Document.body.
Đặc tả HTML cũng định nghĩa các hạn chế đối với tài liệu; ví dụ, nó yêu cầu tất cả các phần tử con của phần tử <ul>, đại diện cho danh sách không có thứ tự, phải là các phần tử <li>, vì chúng đại diện cho các mục danh sách. Nhìn chung, nó cũng cấm sử dụng các phần tử và thuộc tính không được định nghĩa trong một tiêu chuẩn.
Tìm kiếm đối tượng Document, đối tượng Window, và các phần tử DOM khác? Đọc tài liệu DOM.
Các API đáng chú ý khác
- Các hàm
setTimeout()vàsetInterval()lần đầu tiên được đặc tả trên interfaceWindowtrong HTML Standard. - XMLHttpRequest giúp có thể gửi các yêu cầu HTTP bất đồng bộ.
- Fetch API cung cấp một lớp trừu tượng tiện lợi hơn cho các yêu cầu mạng.
- CSS Object Model trừu tượng hóa các quy tắc CSS thành đối tượng.
- WebWorkers cho phép tính toán song song.
- WebSockets cho phép giao tiếp hai chiều ở mức thấp.
- Canvas 2D Context là một API vẽ cho
<canvas>. - WebAssembly interface cung cấp các tiện ích để giao tiếp giữa code JavaScript và các module WebAssembly.
Các môi trường không phải trình duyệt (như Node.js) thường không có DOM API — vì chúng không tương tác với tài liệu — nhưng chúng thường vẫn triển khai nhiều Web API, chẳng hạn như fetch() và setTimeout().
Các triển khai JavaScript
Các JavaScript engine được sử dụng trong các trình duyệt web hiện tại bao gồm:
- SpiderMonkey của Mozilla, được sử dụng trong Firefox, Servo và Flow. Các sử dụng ngoài trình duyệt khác bao gồm MongoDB, CouchDB, và nhiều hơn nữa. Đây là JavaScript engine đầu tiên từ trước đến nay, được tạo ra bởi Brendan Eich tại Netscape.
- V8 của Google, được sử dụng trong Chrome và các trình duyệt dựa trên Chromium như Opera, Edge và Brave. Các sử dụng ngoài trình duyệt khác bao gồm Node.js, Deno, Electron, và nhiều hơn nữa.
- JavaScriptCore của Apple (còn được gọi là SquirrelFish/Nitro), được sử dụng trong Safari và các trình duyệt dựa trên WebKit khác. Các sử dụng ngoài trình duyệt khác bao gồm Bun.
- LibJS, được sử dụng trong Ladybird.
Một số JavaScript engine được sử dụng trong các trình duyệt cũ bao gồm:
- Carakan, được sử dụng trong Opera trước khi nó trở thành trình duyệt dựa trên Chromium.
- Chakra của Microsoft, được sử dụng trong Internet Explorer (mặc dù ngôn ngữ mà nó triển khai chính thức được gọi là "JScript" để tránh các vấn đề bản quyền). Các phiên bản trước của Edge sử dụng một JavaScript engine khác, cũng gây nhầm lẫn được gọi là Chakra, trước khi nó trở thành trình duyệt dựa trên Chromium.
Một số JavaScript engine được thiết kế đặc biệt cho mục đích ngoài trình duyệt bao gồm:
- Engine262, được viết bằng JavaScript và về cơ bản nhằm mục đích là một triển khai tham chiếu của ngôn ngữ.
- Hermes của Meta, được tối ưu hóa cho React Native.
- Rhino của Mozilla, được viết bằng Java.
- GraalJS của Oracle, được viết bằng Java và xây dựng trên GraalVM.
- Moddable XS, dành cho các hệ thống IoT/nhúng.
- QuickJS, nhằm mục đích nhỏ gọn và nhẹ.
Các JavaScript engine cung cấp một API công khai mà các nhà phát triển ứng dụng có thể sử dụng để tích hợp JavaScript vào phần mềm của họ. Cho đến nay, môi trường host phổ biến nhất của JavaScript là trình duyệt web. Trình duyệt web thường sử dụng API công khai để tạo ra các host objects có trách nhiệm phản ánh DOM vào JavaScript.
Một ứng dụng phổ biến khác của JavaScript là ngôn ngữ scripting phía máy chủ (Web). Một máy chủ web JavaScript cung cấp các host object biểu diễn đối tượng yêu cầu và phản hồi HTTP, sau đó có thể được thao tác bởi một chương trình JavaScript để tạo ra trang web động. Node.js là một ví dụ phổ biến về điều này.
Shell
Một JavaScript shell cho phép bạn nhanh chóng kiểm tra các đoạn code JavaScript mà không cần phải tải lại trang web. Chúng cực kỳ hữu ích cho việc phát triển và gỡ lỗi code.
Các JavaScript shell độc lập
Các JavaScript shell sau đây là các môi trường độc lập, giống như Perl hoặc Python.
Các JavaScript shell dựa trên trình duyệt
Các JavaScript shell sau đây chạy code thông qua JavaScript engine của trình duyệt.
- Firefox có một JavaScript console tích hợp sẵn, hỗ trợ chỉnh sửa nhiều dòng.
- Babel REPL - Một REPL dựa trên trình duyệt để thử nghiệm JavaScript trong tương lai.
- TypeScript playground — Một sân chơi dựa trên trình duyệt để thử nghiệm cả các tính năng JavaScript mới (thông qua trình biên dịch tsc) và cú pháp TypeScript.
Công cụ và tài nguyên
Các công cụ hữu ích để viết và gỡ lỗi code JavaScript của bạn.
- Firefox Developer Tools
-
Web Console, JavaScript Profiler, Debugger, và nhiều hơn nữa.
- Learn JavaScript
-
Một tài nguyên xuất sắc cho các nhà phát triển web đầy tham vọng — Học JavaScript trong môi trường tương tác, với các bài học ngắn và bài kiểm tra tương tác, được hướng dẫn bởi đánh giá tự động. 40 bài học đầu tiên miễn phí, và khóa học đầy đủ có sẵn với một khoản thanh toán một lần nhỏ.
- TogetherJS
-
Cộng tác trở nên dễ dàng. Bằng cách thêm TogetherJS vào trang web của bạn, người dùng của bạn có thể giúp đỡ lẫn nhau trên một trang web theo thời gian thực!
- Stack Overflow
-
Các câu hỏi Stack Overflow được gắn thẻ "JavaScript".
- JSFiddle
-
Chỉnh sửa JavaScript, CSS và HTML và nhận kết quả trực tiếp. Sử dụng tài nguyên bên ngoài và cộng tác với nhóm của bạn trực tuyến.
- Plunker
-
Plunker là một cộng đồng trực tuyến để tạo, cộng tác và chia sẻ các ý tưởng phát triển web của bạn. Chỉnh sửa các tệp JavaScript, CSS và HTML và nhận kết quả trực tiếp cùng cấu trúc tệp.
- JS Bin
-
JS Bin là một công cụ gỡ lỗi phát triển web cộng tác mã nguồn mở.
- CodePen
-
CodePen là một công cụ phát triển web cộng tác khác được sử dụng như một sân chơi kết quả trực tiếp.
- StackBlitz
-
StackBlitz là một sân chơi/công cụ gỡ lỗi trực tuyến khác, có thể lưu trữ và triển khai các ứng dụng full-stack sử dụng React, Angular, v.v.
- RunJS
-
RunJS là một công cụ sân chơi/notepad dành cho máy tính để bàn, cung cấp kết quả trực tiếp và quyền truy cập vào cả API Node và Browser.