目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Jul, Week 3 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

setInterval

setInterval方法

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
It will continue calling the function until clearInterval() is called or the window is closed.

For example:

setInterval()方法在一個指定間隔(毫秒)中，呼叫一個函式或評估(evaluate)表達句。
它會持續呼叫函式直到clearInterval()被呼叫，或者視窗被關閉。
舉例：

function myAlert() {
alert("Hi");
}
setInterval(myAlert, 3000);

This will call the myAlert function every 3 seconds (1000 ms = 1 second).

這會每3秒(1000毫秒等於1秒)呼叫myAlert函式一次。

TIP:Write the name of the function without parentheses when passing it into the setInterval method.

提示：寫函式的名稱傳送到setInterval方法時，不寫括號(parentheses)。

-----

The Date Object

日期物件

The Date object enables us to work with dates.
A date consists of a year, a month, a day, an hour, a minute, a second, and milliseconds.

Using new Date(), create a new date object with the current date and time

Date物件讓我們可以處理日期。
一個日期包含了年、月、日、時、分、秒和毫秒。
使用new Date()可新增一個當下的日期和時間的新物件。 

var d = new Date(); //d stores the current date and time  //變數d存放當前的日期和時間

The other ways to initialize dates allow for the creation of new date objects from the specified date and time

另一種方式是用初始化日期來新增日期物件，以指定的日期和時間。 

new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds)
TIP:JavaScript dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC). One day contains 86,400,000 millisecond.

For example:

JavaScript日期是從世界時間(UTC)1970/1/1 00:00:00開始以毫秒計算。
範例： 

//Fri Jan 02 1970 00:00:00
var d1 = new Date(86400000);

//Fri Jan 02 2015 10:42:00
var d2 = new Date("January 2, 2015 10:42:00");

//Sat Jun 11 1988 11:42:00
var d3 = new Date(88,5,11,11,42,0,0);
TIP:JavaScript counts months from 0 to 11. January is 0, and December is 11. Date objects are static, rather than dynamic. The computer time is ticking, but date objects don't change, once created.

提示：JavaScript計算月份是從0到11，一月是0，而十二月是11。
日期物件是靜態的，而不是動態，電腦時間是流動的(ticking滴答作響)，但日期物件一旦新增就不能改變。

-----

Date Methods

Date方法

When a Date object is created, a number of methods make it possible to perform operations on it.

當日期物件被新增，很多方法就可以在它上面執行運作。

contentImage

For example:

範例： 

var d = new Date();
var hours = d.getHours();
//hours is equal to the current hour

Let's create a program that prints the current time to the browser once every second.

我們來新增一個程式，讓瀏覽器每秒都印出當下的時間。 

function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000);

We declared a function printTime(), which gets the current time from the date object, and prints it to the screen.
We then called the function once every second, using the setInterval method.

我們宣告printTime()函式，從物件中取得當前時間，並印在螢幕上。
然後我們使用setInterval方法，每秒呼叫函式一次。 

TIP:The innerHTML property sets or returns the HTML content of an element. In our case, we are changing the HTML content of our document's body. This overwrites the content every second, instead of printing it repeatedly to the screen.

提示：innerHTML屬性設定或回傳元素的HTML內容。在案例中，我們改變文件body的HTML內容，這會每秒覆蓋內容，而不是重複的印在螢幕上。

-----

The DOM

文件物件模型(Document Object Model)

When you open any webpage in a browser, the HTML of the page is loaded and rendered visually on the screen.
To accomplish that, the browser builds the Document Object Model of that page, which is an object oriented model of its logical structure.
The DOM of an HTML document can be represented as a nested set of boxes:

當你在瀏覽器開啟任何網頁時，網頁的HTML被載入，並視覺渲染在螢幕上。
為了達成那效果，瀏覽器需要在頁面建立文件物件模型(Document Object Model)，那是一個物件源自於它邏輯架構的模型。HTML文件的DOM可以表現成巢狀的集合。

contentImage
TIP:JavaScript can be used to manipulate the DOM of a page dynamically to add, delete and modify elements.

提示：JavaScript可以被用來操作(manipulate)DOM，動態的新增、刪除和修改網頁元素。 注意！

-----

DOM Tree

樹狀DOM

The DOM represents a document as a tree structure.
HTML elements become interrelated nodes in the tree.
All those nodes in the tree have some kind of relations among each other.
Nodes can have child nodes. Nodes on the same tree level are called siblings.
For example, consider the following structure:

DOM以樹狀結構的文件表現。HTML元素變成樹中可互相關聯的節點(nodes)。
樹上的所有節點都跟彼此有著某種關係。
節點可以有子節點(child nodes)，在相同樹狀層的節點被稱作兄弟姊妹(siblings)。
範例，想想以下的結構：

contentImage

For the example above:
<html> has two children (<head>, <body>);
<head> has one child (<title>) and one parent (<html>);
<title> has one parent (<head>) and no children;
<body> has two children (<h1> and <a>) and one parent (<html>);

上面的例子：<html>有兩個孩子(<head>和<body>)
<head> 有一個孩子(<title>)和一個父親(<html>)
<title>有一個父親 (<head>)但沒有小孩
<body>有兩個小孩(<h1>和<a>)以及一個父親(<html>) 

TIP:It is important to understand the relationships between elements in an HTML document in order to be able to manipulate them with JavaScript.

提示：了解HTML文件中元素的關係是很重要的，為了能在JavaScript中操作他們。

-----

The document Object

文件物件

There is a predefined document object in JavaScript, which can be used to access all elements on the DOM.
In other words, the document object is the owner (or root) of all objects in your webpage.
So, if you want to access objects in an HTML page, you always start with accessing the document object.
For example:

在JavaScript中有一個預先定義的document物件，使得DOM裡面的所有元素可以被讀取。
換句話說， document物件就是你網頁的所有者(或根基)。
所以，如果你想讀取HTML網頁中的物件，你永遠可以從讀取 document物件開始。
舉例：

document.body.innerHTML = "Some text";

As body is an element of the DOM, we can access it using the document object and change the content of the innerHTML property.

因為body是DOM的一個元素，我們可以用document物件讀取它，並用innerHTML屬性改變內容。 

TIP:The innerHTML property can be used on almost all HTML elements to change its content.

提示：innerHTML屬性可以用在幾乎全部的HTML元素去改變它的內容。

-----

翻譯小心得｜ 在REPLIT測試new Date沒有抓到正確的當地時間(UTC+8)，查了一下資料，還沒得到解答。開始到DOM的篇章，這是之前接觸時就覺得特別有趣而且實用的部分，期待下周更深入的內容。 Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​