Browser Environment, Specs

JavaScript Browser Environment, Specs （JavaScript浏览器环境，规格）

Initially, JavaScript was created for web browsers. But, since then, it has expanded and become a language with different platforms and uses. （最初， JavaScript是为Web浏览器创建的。但是，从那时起，它已经扩展并成为一种具有不同平台和用途的语言。）

A platform can be a browser, a web-server, or another host. Each of them includes a platform-specific functionality. For JavaScript specification, it is a host environment. A host environment has its own objects and functions in addition to the language core. Web browsers allow controlling web pages. For instance, Node.js includes server-side features. （平台可以是浏览器、网络服务器或其他主机。 它们每个都包含一个特定于平台的功能。 对于JavaScript规范，它是一个主机环境。 除了语言核心之外，主机环境还有自己的对象和功能。 Web浏览器允许控制网页。 例如， Node.js包含服务器端功能。）

Let’s check out the overview of JavaScript, running in a web-browser:

The “root” object named window has two roles that are the following:

It is considered a global object for JavaScript code. It presents the “browser window”, providing methods to control it. （它被认为是JavaScript代码的全局对象。 它呈现“浏览器窗口” ，提供控制它的方法。）

If you use it as a global object, it will look like this:

function welcome() {
 console.log("Welcome to w3cdoc");
}
// global functions are global object methods:
window.welcome();

You can also use it as a browser window. It is mainly performed for seeing the window height, like here:

console.log(window.innerHeight); // inner window height

Document Object Model (DOM) #

Document Object Model (DOM) （文档对象模型）

Document Object Model (DOM) is targeted at representing the overall page content as objects that can be transformed. （文档对象模型(DOM)旨在将整个页面内容表示为可以转换的对象。）

The document object is considered the primary “entry point” to the page. It allows you to change or create anything on the page. （文档对象被视为页面的主要“入口点”。它允许您更改或创建页面上的任何内容。）

Below is a case of implementing a change using document.body.style:

// change the background color to green
document.body.style.background = "green";
// change it back after 2 second
setTimeout(() => document.body.style.background = "", 2000);

The DOM specification explains a document structure, providing objects to manipulate it. Some non-browser instruments also use DOM. （DOM规范解释了文档结构，提供了操作它的对象。一些非浏览器工具也使用DOM。）

For example, server-side scripts that download HTML pages and process them are also capable of using DOM. However, only a part of the specification is supported by them. （例如，下载HTML页面并处理它们的服务器端脚本也能够使用DOM。但是，它们仅支持规范的一部分。）

There exists a particular specification, CSS Object Model (CSSOM), which explains how they are represented as objects and the ways of reading and writing them. （有一个特定的规范， CSS对象模型（ CSSOM ） ，它解释了如何将它们表示为对象以及读取和编写它们的方式。）

CSSOM is used along with DOM whenever you modify style rules for the document. However, CSSOM is rarely used in practice, as CSS rules are considered static. （每当您修改文档的样式规则时，都会与DOM一起使用CSSOM。然而， CSSOM在实践中很少使用，因为CSS规则被认为是静态的。）

Browser Object Model (BOM) #

Browser Object Model (BOM) （浏览器对象模型(BOM)）

The Browser Object Model (BOM) represents extra objects provided by the host environment to work with anything excluding the document. （浏览器对象模型(BOM)表示由主机环境提供的额外对象，用于处理除文档以外的任何内容。）

For example, The navigator object provides background information about the operating system and the browser. There are various properties, but the most famous ones are navigator.userAgent (about the current browser) and navigator.platform (about the platform). The location object helps to read the current URL, and it can redirect your browser to a new one. （例如，导航器对象提供有关操作系统和浏览器的背景信息。有各种各样的属性，但最著名的是navigator.userAgent （关于当前浏览器）和navigator.platform （关于平台）。位置对象有助于读取当前网址，并且可以将浏览器重定向到新网址。）

Here is the example of the location object use:

alert(location.href); // shows current URL
if (confirm("Go to w3cdoc?")) {
 location.href = "https://www.w3cdoc.com/"; // redirect the browser to another URL
}

The functions such as alert/confirm/prompt are also a part of BOM. They are not related to the document directly, still representing pure browser methods of communicating with the user. （警报/确认/提示等功能也是物料清单的一部分。它们与文档没有直接关系，仍然代表与用户沟通的纯浏览器方法。）

Please, note that BOM is a part of HTML specification. （请注意， BOM是HTML规范的一部分。）

As a conclusion, let’s state that JavaScript programs need a host environment. And, for a better understanding of client-side JavaScript, it is necessary to master the programming environment provided by a web browser. （最后，让我们说明JavaScript程序需要一个主机环境。而且，为了更好地了解客户端JavaScript ，有必要掌握Web浏览器提供的编程环境。）