Thực hiện của JavaScript

ECMAScript, cốt lõi của JavaScript, mô tả ngữ pháp và các đối tượng cơ bản của ngôn ngữ;

DOM mô tả các phương pháp và giao diện để xử lý nội dung trang web;

BOM mô tả các phương pháp và giao diện để tương tác với trình duyệt.

ECMAScript, DOM và BOM

Mặc dù ECMAScript là một tiêu chuẩn quan trọng,但它 không phải là phần duy nhất của JavaScript,当然,cũng không phải là phần duy nhất được tiêu chuẩn hóa. Thực tế, một thực hiện đầy đủ của JavaScript bao gồm 3 phần khác nhau sau:

JavaScript bao gồm ECMAScript, DOM và BOM

ECMAScript

ECMAScript không gắn kết với bất kỳ trình duyệt cụ thể nào, thực tế, nó cũng không đề cập đến phương pháp cho bất kỳ đầu vào đầu ra người dùng nào (điểm này khác biệt với ngôn ngữ C này, nó cần phụ thuộc vào thư viện bên ngoài để hoàn thành các nhiệm vụ này). Vậy ECMAScript là gì? Mô tả của Tiêu chuẩn ECMA-262 (đoạn 2) như sau:

“ECMAScript có thể cung cấp khả năng lập trình kịch bản cơ bản cho nhiều loại môi trường chủ, vì vậy ngôn ngữ kịch bản cơ bản được quy định riêng biệt với bất kỳ môi trường chủ cụ thể nào... ...”

Trình duyệt web là một môi trường host cho ECMAScript, nhưng không phải là môi trường host duy nhất. Thực tế, còn có rất nhiều môi trường khác nhau (ví dụ ScriptEase của Nombas, và ActionScript của Macromedia được sử dụng cùng lúc trong Flash và Director MX) có thể chứa thực hiện của ECMAScript. Vậy ECMAScript quy định điều gì bên ngoài trình duyệt?

Nói một cách đơn giản, ECMAScript mô tả những nội dung sau:

  • Cú pháp
  • Loại
  • Câu lệnh
  • Từ khóa
  • Từ khóa
  • Toán tử
  • Đối tượng

ECMAScript chỉ là một mô tả, định nghĩa tất cả các thuộc tính, phương pháp và đối tượng của ngôn ngữ kịch bản. Các ngôn ngữ khác có thể thực hiện ECMAScript để làm cơ sở cho các chức năng, JavaScript là một ví dụ:

ECMAScript, JavaScript, ActionScript, ScriptEase

Mỗi trình duyệt đều có một thực hiện của giao diện ECMAScript riêng, sau đó được mở rộng, bao gồm DOM và BOM (sẽ được thảo luận trong các phần sau). Tất nhiên còn có các thực hiện và mở rộng ngôn ngữ ECMAScript khác, chẳng hạn như Windows Scripting Host (WSH), ActionScript của Macromedia trong Flash và Director MX, và Nombas ScriptEase.

1. Phiên bản ECMAScript

ECMAScript được chia thành một số phiên bản khác nhau, được định nghĩa trong chuẩn ECMA-262. Như các chuẩn khác, ECMA-262 cũng sẽ được biên soạn và cập nhật. Khi có các cập nhật chính, sẽ ra mắt phiên bản mới của chuẩn. Phiên bản mới nhất của ECMA-262 là 5.1, được phát hành vào tháng 6 năm 2011.

Phiên bản đầu tiên của ECMA-262 tương tự như Netscape JavaScript 1.1 về bản chất, chỉ là đã xóa bỏ tất cả mã liên quan đến trình duyệt, ngoài ra còn có một số điều chỉnh nhỏ. Đầu tiên, ECMA-262 yêu cầu hỗ trợ chuẩn Unicode (để hỗ trợ nhiều ngôn ngữ). Thứ hai, nó yêu cầu các đối tượng phải không phụ thuộc vào nền tảng (thực tế Netscape JavaScript 1.1 có các thực hiện đối tượng khác nhau, ví dụ đối tượng Date, phụ thuộc vào nền tảng). Đây là lý do chính tại sao JavaScript 1.1 và 1.2 lại không tuân thủ quy định của ECMA-262 phiên bản đầu tiên.

Phiên bản thứ hai của ECMA-262 hầu hết các cập nhật về bản chất là chỉnh sửa. Lần cập nhật tiêu chuẩn này nhằm đảm bảo sự nhất quán chặt chẽ với ISO/IEC-16262 và không thêm, thay đổi hoặc xóa nội dung đặc biệt. ECMAScript thường không tuân thủ phiên bản thứ hai.

Phiên bản thứ ba của ECMA-262 là lần cập nhật thực sự đầu tiên của tiêu chuẩn. Nó cung cấp các cập nhật cho việc xử lý chuỗi, định nghĩa lỗi và đầu ra số trị. Đồng thời, nó cũng tăng cường hỗ trợ biểu thức chính quy, các câu lệnh mới, xử lý ngoại lệ try...catch và một số thay đổi nhỏ để làm cho tiêu chuẩn quốc tế hóa. Nói chung, nó đánh dấu sự ra đời của ECMAScript như một ngôn ngữ lập trình thực sự.

2. Làm thế nào để hiểu về tính tuân thủ ECMAScript

Trong ECMA-262, tính tuân thủ của ECMAScript có định nghĩa rõ ràng. Một ngôn ngữ脚本 phải đáp ứng bốn nguyên tắc cơ bản sau:

  • Các thực hiện tuân thủ phải tuân thủ tất cả các “kiểu, giá trị, đối tượng, thuộc tính, hàm và ngôn ngữ chương trình và ngữ nghĩa” được mô tả trong ECMA-262 (ECMA-262, trang đầu tiên)
  • Các thực hiện tuân thủ phải hỗ trợ tiêu chuẩn ký tự Unicode (UCS)
  • Các thực hiện tuân thủ có thể thêm các “kiểu, giá trị, đối tượng, thuộc tính và hàm” không được chỉ định trong ECMA-262. ECMA-262 mô tả các增加 như các đối tượng mới hoặc các thuộc tính mới của đối tượng trong quy tắc
  • Các thực hiện tuân thủ có thể hỗ trợ các “cấu trúc và biểu thức chính quy” không được định nghĩa trong ECMA-262 (ý nghĩa là có thể thay thế hoặc mở rộng hỗ trợ biểu thức chính quy nội tại)

Tất cả các thực hiện ECMAScript phải tuân thủ các tiêu chuẩn trên.

3. Hỗ trợ ECMAScript trong trình duyệt web

Netscape Navigator 3.0 chứa JavaScript 1.1 được phát hành vào năm 1996. Sau đó, quy tắc JavaScript 1.1 được đề xuất như một dự thảo cho một tiêu chuẩn mới và được gửi đến EMCA. Với sự phổ biến mạnh mẽ của JavaScript, Netscape rất vui vẻ bắt đầu phát triển phiên bản 1.2. Tuy nhiên, có một vấn đề, ECMA đã không chấp nhận dự thảo của Netscape. Chỉ sau khi Netscape Navigator 3.0 được phát hành, Microsoft đã ra mắt IE 3.0. Phiên bản này của IE chứa JScript 1.0 (tên gọi của thực hiện JavaScript riêng của Microsoft), ban đầu dự kiến có thể so sánh với JavaScript 1.1. Tuy nhiên, do tài liệu không đầy đủ và một số tính năng trùng lặp không hợp lý, JScript 1.0 hoàn toàn không đạt đến mức độ của JavaScript 1.1.

Trước khi ECMA-262 phiên bản đầu tiên được hoàn thiện, Netscape Navigator 4.0 chứa JavaScript 1.2 đã được phát hành vào năm 1997. Sau đó vào cuối năm đó, chuẩn ECMA-262 được chấp nhận và tiêu chuẩn hóa. Do đó, JavaScript 1.2 không tương thích với ECMAScript phiên bản đầu tiên, mặc dù ECMAScript nên dựa trên JavaScript 1.1.

Bước tiếp theo của JScript là JScript 3.0 được thêm vào IE 4.0 (phiên bản 2.0 được phát hành cùng với IIS 3.0, nhưng không được bao gồm trong trình duyệt). Microsoft đã quảng bá mạnh mẽ rằng JScript 3.0 là ngôn ngữ kịch bản đầu tiên trên thế giới thực sự tuân thủ chuẩn ECMA. Lúc đó, ECMA-262 vẫn chưa được hoàn thiện, vì vậy JScript 3.0 cũng chịu chung số phận với JavaScript 1.2 - nó vẫn không đạt được chuẩn ECMAScript cuối cùng.

Netscape đã chọn nâng cấp thực hiện JavaScript của mình trong Netscape Navigator 4.06. JavaScript 1.3 đã giúp Netscape cuối cùng cũng phù hợp hoàn toàn với ECMAScript phiên bản đầu tiên. Netscape đã thêm hỗ trợ cho chuẩn Unicode, và đồng thời giữ lại tất cả các tính năng mới được giới thiệu trong JavaScript 1.2,实现了平台独立。

Khi Netscape công bố mã nguồn của mình dưới dạng dự án Mozilla, ban đầu kế hoạch là JavaScript 1.4 sẽ được tích hợp vào Netscape Navigator 5.0. Tuy nhiên, một quyết định dũng cảm - là thiết kế lại hoàn toàn mã nguồn của Netscape từ đầu, đã phá hủy công việc này. JavaScript 1.4 chỉ được phát hành như là ngôn ngữ kịch bản máy chủ cho Netscape Enterprise Server, và sau đó cũng không được đưa vào trình duyệt.

Hiện nay, tất cả các trình duyệt web phổ biến đều tuân thủ ECMA-262 phiên bản thứ ba.

Bảng dưới đây liệt kê hỗ trợ ECMAScript của hầu hết các trình duyệt Web phổ biến:

Trình duyệt Khả năng tương thích DOM
Netscape Navigator 2.0 -
Netscape Navigator 3.0 -
Netscape Navigator 4.0 - 4.05 -
Netscape Navigator 4.06 - 4.79 Phiên bản 1
Netscape 6.0+ (Mozilla 0.6.0+) Phiên bản 3
Internet Explorer 3.0 -
Internet Explorer 4.0 -
Internet Explorer 5.0 Phiên bản 1
Internet Explorer 5.5+ Phiên bản 3
Opera 6.0 - 7.1 Phiên bản 2
Opera 7.2+ Phiên bản 3
Safari 1.0+/Konqueror ~ 2.0+ Phiên bản 3

DOM

DOM (Document Object Model) là giao diện ứng dụng (API) của HTML và XML. DOM sẽ sắp xếp toàn bộ trang thành một tài liệu được cấu thành từ các cấp độ nút. Mỗi phần của trang HTML hoặc XML là một hậu duệ của một nút. Hãy xem xét trang HTML dưới đây:

<html>
  <head>
    <title>Trang mẫu</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>

Mã này có thể được vẽ thành một biểu đồ cây cấp độ bằng DOM:

Hình thức tầng của DOM

DOM tạo ra một cây để biểu diễn tài liệu, từ đó các nhà phát triển có khả năng kiểm soát nội dung và cấu trúc của tài liệu một cách không tiền khoáng cổ. Với DOM API, họ có thể dễ dàng xóa, thêm và thay thế các nút.

1. Tại sao DOM không thể thiếu

Từ khi IE 4.0 và Netscape Navigator 4.0 hỗ trợ các hình thái khác nhau của HTML động (DHTML), các nhà phát triển lần đầu tiên có thể thay đổi外观 và nội dung của nó mà không cần tải lại trang web. Đây là một bước tiến lớn của công nghệ Web, nhưng cũng mang lại nhiều vấn đề lớn. Netscape và Microsoft各自 phát triển DHTML, từ đó kết thúc thời kỳ các nhà phát triển chỉ cần viết một trang HTML để có thể truy cập trên tất cả các trình duyệt.

Ngành công nghiệp quyết định phải làm điều gì đó để duy trì tính tương thích nền tảng của Web, họ lo lắng rằng nếu để Netscape và Công ty Microsoft làm như vậy, Web sẽ phân hóa thành hai phần độc lập, mỗi phần chỉ phù hợp với trình duyệt cụ thể. Do đó, nhóm phụ trách quy định tiêu chuẩn giao tiếp Web W3C (World Wide Web Consortium) đã bắt đầu quy định DOM.

2. Các level của DOM

DOM Level 1 được W3C đề xuất vào tháng 10 năm 1998. Nó bao gồm hai mô-đun, đó là DOM Core và DOM HTML. Mô-đun trước cung cấp sơ đồ cấu trúc tài liệu dựa trên XML để truy cập và xử lý bất kỳ phần nào của tài liệu; mô-đun sau thêm vào một số đối tượng và phương pháp chuyên dụng cho HTML, từ đó mở rộng DOM Core.

Lưu ý rằng DOM không phải là độc quyền của JavaScript, thực tế thì nhiều ngôn ngữ khác cũng đã triển khai nó. Tuy nhiên, DOM trong trình duyệt Web đã được triển khai bằng ECMAScript, bây giờ nó là một phần rất lớn của ngôn ngữ JavaScript.

DOM Level 1 chỉ là một mục tiêu, tức là规划 tài liệu cấu trúc, mục tiêu của DOM Level 2 rộng rãi hơn nhiều. Mở rộng của DOM ban đầu đã thêm hỗ trợ cho các sự kiện của con trỏ và giao diện người dùng (DHTML hỗ trợ phong phú cho điều này), phạm vi, duyệt (phương pháp lặp lại DOM tài liệu), và thông qua giao diện đối tượng thêm hỗ trợ cho CSS (bảng样式 kết hợp). DOM Core ban đầu được giới thiệu ở Level 1 cũng đã thêm hỗ trợ cho không gian tên XML.

DOM Level 2 đã giới thiệu một số mô-đun DOM mới để xử lý các loại giao diện mới:

  • DOM quan sát - mô tả việc theo dõi các quan sát khác nhau của tài liệu (tức là tài liệu trước và sau khi được phong cách hóa CSS)
  • DOM sự kiện - mô tả giao diện sự kiện
  • DOM phong cách - mô tả giao diện xử lý các giao diện dựa trên phong cách CSS
  • DOM duyệt và phạm vi - mô tả giao diện duyệt và操作 cây tài liệu

DOM Level 3 đã giới thiệu các phương pháp để tải và duy trì tài liệu một cách thống nhất (bao gồm trong mô-đun mới DOM Load and Save) và các phương pháp xác thực tài liệu (DOM Validation), từ đó mở rộng thêm DOM. Ở Level 3, DOM Core được mở rộng để hỗ trợ tất cả các tính năng của XML 1.0, bao gồm XML Infoset, XPath và XML Base.

Khi học DOM, bạn có thể gặp người nào đó trích dẫn DOM Level 0. Lưu ý rằng không có tiêu chuẩn DOM Level 0, nó chỉ là một điểm tham khảo lịch sử của DOM (DOM Level 0指的是 IE 4.0 và Netscape Navigator 4.0 hỗ trợ nguyên bản DHTML).

3. Các DOM khác

Bên cạnh DOM Core và DOM HTML, còn có một số ngôn ngữ khác đã công bố các tiêu chuẩn DOM của riêng họ. Mọi ngôn ngữ này đều dựa trên XML, mỗi DOM đều thêm vào ngôn ngữ của mình các phương pháp và giao diện đặc trưng:

  • Ngôn ngữ véc-tơ mở rộng (SVG) 1.0
  • Ngôn ngữ đánh dấu số học (MathML) 1.0
  • Ngôn ngữ tích hợp đa phương tiện đồng bộ (SMIL)

Ghi chú：Nếu bạn muốn học thêm về các nội dung liên quan, hãy truy cập CodeW3C của chúng ta Hướng dẫn SMIL và Hướng dẫn SVG.

Ngoài ra, các ngôn ngữ khác cũng đã phát triển các thực hiện DOM của riêng mình, chẳng hạn như ngôn ngữ giao diện người dùng XML của Mozilla (XUL). Tuy nhiên, chỉ có các ngôn ngữ được liệt kê trên đây mới là tiêu chuẩn khuyến nghị của W3C.

4. Hỗ trợ DOM trong trình duyệt web

DOM đã là một tiêu chuẩn trước khi trình duyệt web bắt đầu thực hiện. IE đã thử lần đầu tiên DOM trong phiên bản 5.0, nhưng thực tế chỉ đến phiên bản 5.5 sau đó mới có hỗ trợ DOM thực sự, IE 5.5 đã thực hiện DOM Level 1. Từ đó, IE không giới thiệu thêm các tính năng DOM mới.

Netscape chỉ đến Netscape 6 (Mozilla 0.6.0) mới引入 hỗ trợ DOM. Hiện tại, Mozilla có hỗ trợ DOM tốt nhất, thực hiện hoàn chỉnh Level 1, hầu hết Level 2 và một phần Level 3. (Mục tiêu của nhóm phát triển Mozilla là tạo ra một trình duyệt tương thích 100% với tiêu chuẩn, và công việc của họ đã được đền đáp.)

Opera chỉ đến phiên bản 7.0 mới hỗ trợ DOM, và Safari cũng đã thực hiện hầu hết các DOM Level 1. Hầu hết đều ở cùng mức độ với IE 5.5, thậm chí trong một số trường hợp, thậm chí còn vượt qua IE 5.5. Tuy nhiên, về việc hỗ trợ DOM, tất cả các trình duyệt đều远远落后于 Mozilla. Bảng dưới đây liệt kê hỗ trợ DOM của các trình duyệt phổ biến.

Trình duyệt Khả năng tương thích DOM
Netscape Navigator 1.0 - 4.x -
Netscape 6.0+ (Mozilla 0.6.0+) Level 1、Level 2、Level 3 (phần nào)
IE 2.0 - 4.x -
IE 5.0 Level 1 (nhỏ nhất)
IE 5.5+ Level 1 (hầu hết)
Opera 1.0 - 6.0 -
Opera 7.0+ Level 1 (hầu hết)、Level 2 (phần nào)
Safari 1.0+/Konqueror ~ 2.0+ Level 1

Ghi chú：Nếu bạn muốn học thêm về kiến thức DOM, hãy truy cập CodeW3C của chúng ta Hướng dẫn HTML DOM và Hướng dẫn XML DOM.

BOM

IE 3.0 và Netscape Navigator 3.0 cung cấp một tính năng - BOM (Browser Object Model), có thể truy cập và điều khiển cửa sổ trình duyệt. Sử dụng BOM, nhà phát triển có thể di chuyển cửa sổ, thay đổi văn bản trong thanh trạng thái và thực hiện các hành động khác không trực tiếp liên quan đến nội dung trang. Điểm đặc biệt và thường gây nghi ngờ của BOM là nó chỉ là một phần của JavaScript, không có tiêu chuẩn liên quan.

BOM chủ yếu xử lý cửa sổ trình duyệt và khung, nhưng thường các mở rộng JavaScript đặc trưng cho trình duyệt được coi là một phần của BOM. Các mở rộng này bao gồm:

  • Mở cửa sổ trình duyệt mới
  • Di chuyển, đóng cửa sổ trình duyệt và điều chỉnh kích thước cửa sổ
  • Cung cấp thông tin chi tiết về trình duyệt web của đối tượng định hướng
  • Cung cấp thông tin chi tiết về độ phân giải màn hình người dùng của đối tượng màn hình
  • Hỗ trợ cookie
  • IE đã mở rộng BOM bằng cách thêm lớp ActiveXObject, có thể thực hiện đối tượng ActiveX bằng JavaScript

Do không có tiêu chuẩn BOM liên quan, mỗi trình duyệt có thực hiện BOM của riêng mình. Có một số tiêu chuẩn thực tế, chẳng hạn như có một đối tượng cửa sổ và đối tượng định hướng, nhưng mỗi trình duyệt có thể định nghĩa các thuộc tính và phương pháp của các đối tượng này hoặc các đối tượng khác.

Xem thêm: