Browser environment, specs

Author: hoangnv170752

.gitignore

@@ -21,3 +21,6 @@ sftp-config.json
 Thumbs.db
 
 
+branch_structure.json
+temp_auto_push.bat
+temp_interactive_push.bat

2-ui/1-document/01-browser-environment/article.md

@@ -1,113 +1,113 @@
-# Browser environment, specs
+# Môi trường trình duyệt, các thông số kỹ thuật
 
-The JavaScript language was initially created for web browsers. Since then it has evolved and become a language with many uses and platforms.
+Ngôn ngữ JavaScript được tạo ra với mục đích ban đầu là dành cho những trình duyệt web. Kể từ đó nó đã tiến hoá và trở thành một ngôn ngữ có nhiều công dụng và nền tảng.
 
-A platform may be a browser, or a web-server or another *host*, even a "smart" coffee machine, if it can run JavaScript. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*.
+Một nền tảng có thể là trình duyệt, máy chủ web hoặc một *máy chủ* khác, hoặc là cả một máy pha cà phê *thông minh*, nếu nó có thể chạy bằng JavaScript. Mỗi một nền tảng cung cấp chức năng mang tính riêng biệt. Việc đặc tả của JavaScript gọi đó là *môi trường máy chủ*.
 
-A host environment provides own objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on.
+Môi trường máy chủ cung cấp các đối tượng và các hàm riêng bổ sung cho lõi của ngôn ngữ. Trình duyệt web cung cấp phương tiện để kiểm soát các trang web. Node.js cung cấp các tính năng từ phía máy chủ, v.v.
 
-Here's a bird's-eye view of what we have when JavaScript runs in a web browser:
+Đây là cái nhìn toàn cảnh về những gì chúng ta có khi JavaScript chạy trong trình duyệt web:
 
 ![](windowObjects.svg)
 
-There's a "root" object called `window`. It has two roles:
+Có một đối tượng "gốc" được gọi là `cửa sổ`. Nó có hai vai trò:
 
-1. First, it is a global object for JavaScript code, as described in the chapter <info:global-object>.
-2. Second, it represents the "browser window" and provides methods to control it.
+1. Đầu tiên, nó là một đối tượng chung cho mã JavaScript, như được mô tả trong chương <info:global-object>.
+2. Thứ hai, nó đại diện cho "cửa sổ trình duyệt" và cung cấp các phương thức để kiểm soát nó.
 
-For instance, here we use it as a global object:
+Ví dụ, ở đây chúng ta sử dụng nó như một đối tượng toàn cục:
 
 ```js run
 function sayHi() {
-  alert("Hello");
+  alert("Xin chào");
 }
 
-// global functions are methods of the global object:
+// các hàm toàn cục là các phương thức của đối tượng toàn cục:
 window.sayHi();
 ```
 
-And here we use it as a browser window, to see the window height:
+Còn ở đây thì chúng ta sử dụng nó làm cửa sổ trình duyệt, để xem chiều cao của cửa sổ:
 
 ```js run
-alert(window.innerHeight); // inner window height
+alert(window.innerHeight); // chiều cao bên trong của cửa sổ
 ```
 
-There are more window-specific methods and properties, we'll cover them later.
+Có nhiều phương thức và thuộc tính dành riêng cho cửa sổ hơn, chúng ta sẽ đề cập đến chúng sau.
 
 ## DOM (Document Object Model)
 
-Document Object Model, or DOM for short, represents all page content as objects that can be modified.
+Mô hình đối tượng tài liệu hoặc viết tắt là DOM, thể hiện tất cả nội dung trang dưới dạng các đối tượng có thể được sửa đổi.
 
-The `document` object is the main "entry point" to the page. We can change or create anything on the page using it.
+Đối tượng `document` là "điểm vào" chính của trang. Chúng ta có thể thay đổi hoặc tạo bất cứ thứ gì trên trang bằng cách sử dụng nó.
 
-For instance:
+Ví dụ:
 ```js run
-// change the background color to red
+// thay đổi màu nền thành màu đỏ
 document.body.style.background = "red";
 
 // change it back after 1 second
 setTimeout(() => document.body.style.background = "", 1000);
 ```
 
-Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification: [DOM Living Standard](https://dom.spec.whatwg.org).
+Ở đây chúng ta đã sử dụng `document.body.style`, nhưng còn nhiều hơn thế nữa. Các thuộc tính và phương thức được mô tả trong thông số kỹ thuật: [Tiêu chuẩn cơ bản của DOM](https://dom.spec.whatwg.org).
 
-```smart header="DOM is not only for browsers"
-The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use DOM too.
+```smart header="DOM không chỉ dành cho trình duyệt"
+Việc đặc tả DOM giải thích cấu trúc của tài liệu và cung cấp các đối tượng để thao tác với nó. Có những công cụ không có trình duyệt cũng sử dụng DOM.
 
-For instance, server-side scripts that download HTML pages and process them can also use DOM. They may support only a part of the specification though.
+Ví dụ: các tập lệnh phía máy chủ tải xuống các trang HTML và xử lý chúng cũng có thể sử dụng DOM. Tuy nhiên, chúng có thể chỉ hỗ trợ một phần thông số kỹ thuật.
 ```
 
-```smart header="CSSOM for styling"
-There's also a separate specification, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) for CSS rules and stylesheets, that explains how they are represented as objects, and how to read and write them.
+```smart header="CSSOM cho việc thiết kế"
+Ngoài ra còn có một thông số kỹ thuật riêng, [Mô hình đối tượng CSS (CSSOM)](https://www.w3.org/TR/cssom-1/) dành cho các quy tắc và biểu định kiểu CSS, giải thích cách chúng được thể hiện dưới dạng đối tượng và cách đọc và viết chúng.
 
-CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because we rarely need to modify CSS rules from JavaScript (usually we just add/remove CSS classes, not modify their CSS rules), but that's also possible.
+CSSOM được sử dụng cùng với DOM khi chúng tôi sửa đổi quy tắc kiểu cho tài liệu. Tuy nhiên, trên thực tế, CSSOM hiếm khi được yêu cầu vì chúng ta hiếm khi cần sửa đổi các quy tắc CSS từ JavaScript (thông thường chúng ta chỉ thêm/xóa các lớp CSS chứ không sửa đổi các quy tắc CSS của chúng), nhưng điều đó cũng có thể thực hiện được.
 ```
 
 ## BOM (Browser Object Model)
 
-The Browser Object Model (BOM) represents additional objects provided by the browser (host environment) for working with everything except the document.
+Mô hình đối tượng trình duyệt (BOM) đại diện cho các đối tượng bổ sung được cung cấp bởi trình duyệt (môi trường máy chủ) để làm việc với mọi thứ ngoại trừ tài liệu.
 
-For instance:
+Ví dụ:
 
-- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc).
-- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one.
+- Đối tượng [navigator](mdn:api/Window/navigator) cung cấp thông tin cơ bản về trình duyệt và hệ điều hành. Có nhiều thuộc tính, nhưng hai thuộc tính được biết đến rộng rãi nhất là: `navigator.userAgent` -- về trình duyệt hiện tại và `navigator.platform` -- về nền tảng (có thể giúp phân biệt giữa Windows/Linux/Mac, v.v.).
+- Đối tượng [location](mdn:api/Window/location) cho phép chúng ta đọc URL hiện tại và có thể chuyển hướng trình duyệt sang một URL mới.
 
-Here's how we can use the `location` object:
+Đây là cách chúng ta có thể sử dụng đối tượng `location`:
 
 ```js run
-alert(location.href); // shows current URL
-if (confirm("Go to Wikipedia?")) {
-  location.href = "https://wikipedia.org"; // redirect the browser to another URL
+alert(location.href); // hiển thị URL hiện tại
+if (confirm("Truy cập vào Wikipedia?")) {
+  location.href = "https://wikipedia.org"; // chuyển hướng trình duyệt đến một URL khác
 }
 ```
 
-Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
+Các chức năng `cảnh báo/xác nhận/nhắc nhở` cũng là một phần của BOM: chúng không liên quan trực tiếp đến tài liệu nhưng thể hiện các phương thức giao tiếp thuần túy của trình duyệt với người dùng.
 
-```smart header="Specifications"
-BOM is the part of the general [HTML specification](https://html.spec.whatwg.org).
+```smart header="Những đặc tả"
+BOM là một phần của [đặc tả HTML] chung(https://html.spec.whatwg.org).
 
-Yes, you heard that right. The HTML spec at <https://html.spec.whatwg.org> is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at <https://spec.whatwg.org>.
+Có, bạn nghe nói rằng ngay. Thông số HTML tại <https://html.spec.whatwg.org> không chỉ nói về "ngôn ngữ HTML" (thẻ, thuộc tính) mà còn bao gồm một loạt đối tượng, phương thức và tiện ích mở rộng DOM dành riêng cho trình duyệt. Đó là "HTML theo nghĩa rộng". Ngoài ra, một số bộ phận còn có thông số kỹ thuật bổ sung được liệt kê tại <https://spec.whatwg.org>.
 ```
 
-## Summary
+## Tóm tắt
 
-Talking about standards, we have:
+Nói về tiêu chuẩn, chúng ta có:
 
-DOM specification
-: Describes the document structure, manipulations and events, see <https://dom.spec.whatwg.org>.
+Đặc tả DOM
+: Mô tả cấu trúc tài liệu, các thao tác và sự kiện, xem <https://dom.spec.whatwg.org>.
 
-CSSOM specification
-: Describes stylesheets and style rules, manipulations with them and their binding to documents, see <https://www.w3.org/TR/cssom-1/>.
+Đặc tả CSSOM
+: Mô tả các bảng định kiểu và quy tắc kiểu, các thao tác với chúng và ràng buộc của chúng với tài liệu, xem <https://www.w3.org/TR/cssom-1/>.
 
-HTML specification
-: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see <https://html.spec.whatwg.org>. It takes the DOM specification and extends it with many additional properties and methods.
+Đặc tả HTML
+: Mô tả ngôn ngữ HTML (ví dụ: thẻ) và cả BOM (mô hình đối tượng trình duyệt) -- các chức năng trình duyệt khác nhau: `setTimeout`, `alert`, `location`, v.v., xem <https://html.spec.whatwg .org>. Nó lấy đặc tả DOM và mở rộng nó với nhiều thuộc tính và phương thức bổ sung.
 
-Additionally, some classes are described separately at <https://spec.whatwg.org/>.
+Ngoài ra, một số lớp được mô tả riêng tại <https://spec.whatwg.org/>.
 
-Please note these links, as there's so much stuff to learn it's impossible to cover and remember everything.
+Vui lòng lưu ý các liên kết này, vì có quá nhiều thứ cần học nên không thể trình bày và ghi nhớ hết mọi thứ.
 
-When you'd like to read about a property or a method, the Mozilla manual at <https://developer.mozilla.org/en-US/search> is also a nice resource, but the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete.
+Khi bạn muốn đọc về một thuộc tính hoặc một phương thức, hướng dẫn sử dụng Mozilla tại <https://developer.mozilla.org/en-US/search> cũng là một tài nguyên hay, nhưng thông số kỹ thuật tương ứng có thể tốt hơn: nó phức tạp hơn và dài hơn để đọc, nhưng sẽ làm cho kiến ​​thức cơ bản của bạn trở nên rõ ràng và đầy đủ.
 
-To find something, it's often convenient to use an internet search "WHATWG [term]" or "MDN [term]", e.g <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
+Để tìm thứ gì đó, thường rất thuận tiện khi sử dụng tìm kiếm trên internet "WHATWG [thuật ngữ]" hoặc "MDN [thuật ngữ]", ví dụ: <https://google.com?q=whatwg+localstorage>, <https://google.com?q=mdn+localstorage>.
 
-Now we'll get down to learning DOM, because the document plays the central role in the UI.
+Bây giờ chúng ta sẽ bắt đầu tìm hiểu DOM vì tài liệu này đóng vai trò trung tâm trong giao diện người dùng.