From 0ebca76045eb3c81d92bd4820bac5e2b3dc27aae Mon Sep 17 00:00:00 2001
From: allo `, `如果球位置的Y值低於零,改變Y軸上的運動的方向,通過設置它等於本身,扭轉。如果球是向上移動的速度為每幀的2個像素,現在它將移動“了”的速度為- 2像素,這實際上等於在每幀的2個像素的速度向下移動。
如果球位置的Y值低於零,改變Y軸上的運動的方向,通過設置它等於本身,扭轉。如果球是向上移動的速度為每幀的2個像素,現在它將移動“了”的速度為- 2像素,這實際上等於在每幀的2個像素的速度向下移動。
-上面的代碼將處理球反彈的頂部邊緣,所以現在讓我們想想下邊緣:
+上面的代碼將處理球反彈的頂部邊緣,所以現在讓我們想想下邊緣:
if(y + dy > canvas.height) { dy = -dy; diff --git a/files/zh-tw/glossary/adobe_flash/index.html b/files/zh-tw/glossary/adobe_flash/index.html index 3fcfabd1406b45..57b379f838003e 100644 --- a/files/zh-tw/glossary/adobe_flash/index.html +++ b/files/zh-tw/glossary/adobe_flash/index.html @@ -7,7 +7,7 @@ - 過時技術 translation_of: Glossary/Adobe_Flash --- -Flash 是一個由 Adobe 開發的過時網路技術。它能展現出富有表現力的 Web 程式、向量圖形、還有各種多媒體。Adobe Flash 需要在{{Glossary("瀏覽器")}}安裝相對應的擴充套件後才能使用。
+Flash 是一個由 Adobe 開發的過時網路技術。它能展現出富有表現力的 Web 程式、向量圖形、還有各種多媒體。Adobe Flash 需要在{{Glossary("瀏覽器")}}安裝相對應的擴充套件後才能使用。
diff --git a/files/zh-tw/glossary/browsing_context/index.html b/files/zh-tw/glossary/browsing_context/index.html index 77fa42eb7fdf17..bab96ecf371439 100644 --- a/files/zh-tw/glossary/browsing_context/index.html +++ b/files/zh-tw/glossary/browsing_context/index.html @@ -6,7 +6,7 @@ - 術語表 translation_of: Glossary/Browsing_context --- -
瀏覽上下文是一個瀏覽器({{glossary("browser")}})展示文檔({{domxref("Document")}})的環境(正常來説是一個現在的標簽,但也有可能是一個窗體或是一個框架裏面的頁面)。
+瀏覽上下文是一個瀏覽器({{glossary("browser")}})展示文檔({{domxref("Document")}})的環境(正常來説是一個現在的標簽,但也有可能是一個窗體或是一個框架裏面的頁面)。
每個瀏覽上下文都有一個特定的活動文檔來源{{glossary("origin")}}並按順序列出所有文檔的歷史記錄。
diff --git a/files/zh-tw/glossary/callback_function/index.html b/files/zh-tw/glossary/callback_function/index.html index 3bfcdf6dd34079..d86ef2fac262ab 100644 --- a/files/zh-tw/glossary/callback_function/index.html +++ b/files/zh-tw/glossary/callback_function/index.html @@ -31,6 +31,6 @@一般常識
diff --git a/files/zh-tw/glossary/dos_attack/index.html b/files/zh-tw/glossary/dos_attack/index.html index 84c0b65a0f8a3e..a56d630ad5c40d 100644 --- a/files/zh-tw/glossary/dos_attack/index.html +++ b/files/zh-tw/glossary/dos_attack/index.html @@ -7,9 +7,9 @@ - 術語表 translation_of: Glossary/DOS_attack --- -
- 維基百科的 {{interwiki("wikipedia", "回呼函式")}}
- - +
DoS (拒絕服務)是一種網路攻擊手段,它通過大量的伺服器請求來阻止合法使用伺服器({{glossary("server")}})資源。
+DoS (拒絕服務)是一種網路攻擊手段,它通過大量的伺服器請求來阻止合法使用伺服器({{glossary("server")}})資源。
-計算機的資源有限,例如計算能力或内存。當這些資源過載,程式可能會凍結或崩潰,導致程式不可用。DoS 攻擊由耗盡資源、使伺服器或網路對合法用戶不可用、使服務器執行緩慢等多種技術組成。
+計算機的資源有限,例如計算能力或内存。當這些資源過載,程式可能會凍結或崩潰,導致程式不可用。DoS 攻擊由耗盡資源、使伺服器或網路對合法用戶不可用、使服務器執行緩慢等多種技術組成。
DoS 攻擊的類型
diff --git a/files/zh-tw/glossary/firefox_os/index.html b/files/zh-tw/glossary/firefox_os/index.html index 050eec7eed627c..9dc2d2e2442c03 100644 --- a/files/zh-tw/glossary/firefox_os/index.html +++ b/files/zh-tw/glossary/firefox_os/index.html @@ -6,7 +6,7 @@ - 術語表 translation_of: Glossary/Firefox_OS --- -Firefox OS 是 Mozilla's 手機操作系統,基於 Linux 和 {{glossary("Mozilla Firefox","Firefox's")}} 强大的 {{glossary("Gecko")}} 渲染引擎。Firefox OS 主要由 {{glossary("Gaia")}}, {{glossary("Gecko")}}, 和 {{glossary("Gonk")}} 組成。
+Firefox OS 是 Mozilla's 手機操作系統,基於 Linux 和 {{glossary("Mozilla Firefox","Firefox's")}} 强大的 {{glossary("Gecko")}} 渲染引擎。Firefox OS 主要由 {{glossary("Gaia")}}, {{glossary("Gecko")}}, 和 {{glossary("Gonk")}} 組成。
了解更多
diff --git a/files/zh-tw/glossary/keyword/index.html b/files/zh-tw/glossary/keyword/index.html index 53e51ca35452a5..a4934f975f87b0 100644 --- a/files/zh-tw/glossary/keyword/index.html +++ b/files/zh-tw/glossary/keyword/index.html @@ -6,7 +6,7 @@ - 關鍵詞 translation_of: Glossary/Keyword --- -關鍵詞是描述内容的字或短語。在綫關鍵詞被用於搜索引擎的查詢或用來識別站點上的内容.
+關鍵詞是描述内容的字或短語。在綫關鍵詞被用於搜索引擎的查詢或用來識別站點上的内容.
當你使用搜索引擎,你會使用指定的關鍵詞來搜索你想查找的東西,搜索引擎根據關鍵詞來返回相關的結果頁。爲了搜索到更精準的結果,需要嘗試更多指定的關鍵詞,如使用 "Blue Mustang GTO" 代替簡單的 "Mustang"。網頁也可以用 meta 標簽(寫在 {{htmlelement("head")}}使用關鍵詞描述頁面的内容,它可以使搜索引擎更好的定義和組織網頁。
diff --git a/files/zh-tw/glossary/mathml/index.html b/files/zh-tw/glossary/mathml/index.html index 0005ad20dee46e..37c96f28ee93ab 100644 --- a/files/zh-tw/glossary/mathml/index.html +++ b/files/zh-tw/glossary/mathml/index.html @@ -6,7 +6,7 @@ - 術語表 translation_of: Glossary/MathML --- -MathML (一種 {{glossary("XML")}} 應用程式)是一種在網頁上表示數學表達式的開放標準。在 1998 年 W3C 第一次在瀏覽器({{glossary("browser")}})推薦了 MathML 表示數學表達式。 MathML還有其他應用程式,它包括了科學内容和聲音合成。
+MathML (一種 {{glossary("XML")}} 應用程式)是一種在網頁上表示數學表達式的開放標準。在 1998 年 W3C 第一次在瀏覽器({{glossary("browser")}})推薦了 MathML 表示數學表達式。 MathML還有其他應用程式,它包括了科學内容和聲音合成。
了解更多
diff --git a/files/zh-tw/glossary/opera_browser/index.html b/files/zh-tw/glossary/opera_browser/index.html index 37bbc8e9eb38f1..6fcb1c96033171 100644 --- a/files/zh-tw/glossary/opera_browser/index.html +++ b/files/zh-tw/glossary/opera_browser/index.html @@ -9,7 +9,7 @@ - Opera Browser translation_of: Glossary/Opera_Browser --- -Opera 是最常使用的 {{glossary("browser")}} 第五名,1996 年正式推出,一開始僅能在 Windows 使用。Opera 自 2013 年起使用 {{glossary("Blink")}} 排版引擎,在那之前使用的是 {{glossary("Presto")}}。Opera 也有提供行動與平板電腦版本。
+Opera 是最常使用的 {{glossary("browser")}} 第五名,1996 年正式推出,一開始僅能在 Windows 使用。Opera 自 2013 年起使用 {{glossary("Blink")}} 排版引擎,在那之前使用的是 {{glossary("Presto")}}。Opera 也有提供行動與平板電腦版本。
了解更多
diff --git a/files/zh-tw/glossary/protocol/index.html b/files/zh-tw/glossary/protocol/index.html index e4487bc54373da..517fa6948fd60b 100644 --- a/files/zh-tw/glossary/protocol/index.html +++ b/files/zh-tw/glossary/protocol/index.html @@ -7,7 +7,7 @@ - Protocols translation_of: Glossary/Protocol --- -通訊協定是一套定義在電腦內部或兩台電腦間,如何交換資料的系統化規則。不同的裝置若需進行溝通,就需要先確認好要交換的資料格式與交換方法,而這些定義好的格式與方法就是通訊協定。
+通訊協定是一套定義在電腦內部或兩台電腦間,如何交換資料的系統化規則。不同的裝置若需進行溝通,就需要先確認好要交換的資料格式與交換方法,而這些定義好的格式與方法就是通訊協定。
了解更多
diff --git a/files/zh-tw/glossary/sql_injection/index.html b/files/zh-tw/glossary/sql_injection/index.html index eafe7f706bcbaa..1c98d621c4a6a9 100644 --- a/files/zh-tw/glossary/sql_injection/index.html +++ b/files/zh-tw/glossary/sql_injection/index.html @@ -43,7 +43,7 @@如何做動
如何避免
-在執行用戶的憑證查詢前,先做如下的改變:
+在執行用戶的憑證查詢前,先做如下的改變:
$id = $_GET['id'] diff --git a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html index 896127764180ca..4e85df81b0dbc3 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/zh-tw/learn/getting_started_with_the_web/javascript_basics/index.html @@ -36,7 +36,7 @@「Hello world」範例程式
前面所述的功能聽起來令人興奮,而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一,您會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。
-但無論如何,要讓 JavaScript 跟 HTML 和 CSS 合作無間的話,可能還要費一些功夫。現在您將會從一些細小的地方開始著手,接著一步步地往前進。首先,我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中,並且打造一個「hello world!」的範例(這同時也是許多程式語言的標準範例程式)。
+但無論如何,要讓 JavaScript 跟 HTML 和 CSS 合作無間的話,可能還要費一些功夫。現在您將會從一些細小的地方開始著手,接著一步步地往前進。首先,我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中,並且打造一個「hello world!」的範例(這同時也是許多程式語言的標準範例程式)。
注意:如果您還沒有學習過先前的課程,請您下載這個範例程式碼,並以此開始練習。
diff --git a/files/zh-tw/learn/javascript/building_blocks/looping_code/index.html b/files/zh-tw/learn/javascript/building_blocks/looping_code/index.html index eadfcb911450ee..fa3737615fc2e4 100644 --- a/files/zh-tw/learn/javascript/building_blocks/looping_code/index.html +++ b/files/zh-tw/learn/javascript/building_blocks/looping_code/index.html @@ -585,11 +585,11 @@Active learning
</div> - + - + - +html { font-family: sans-serif; @@ -611,13 +611,13 @@- + - + - + - +Active learning
background: #f5f9fa; }var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -696,7 +696,7 @@- +Active learning
updateCode(); };{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}
@@ -909,7 +909,7 @@See also
- while and do...while references
- break and continue references
- -
diff --git a/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.html b/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.html index ec8ba914db5d69..40d62604946de1 100644 --- a/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/zh-tw/learn/javascript/first_steps/useful_string_methods/index.html @@ -24,7 +24,7 @@What’s the Best Way to Write a JavaScript For Loop? — some advanced loop best practices
+What’s the Best Way to Write a JavaScript For Loop? — some advanced loop best practices
把字串當作物件
-我們曾經說過,現在我們重申一遍—在javascript中,一切東西都可以被當作物件。例如我們創建一個字串。
+我們曾經說過,現在我們重申一遍—在javascript中,一切東西都可以被當作物件。例如我們創建一個字串。
var string = 'This is my string';diff --git a/files/zh-tw/learn/server-side/django/authentication/index.html b/files/zh-tw/learn/server-side/django/authentication/index.html index ff5a9b5cc5a5c8..d9915ef1ef166b 100644 --- a/files/zh-tw/learn/server-side/django/authentication/index.html +++ b/files/zh-tw/learn/server-side/django/authentication/index.html @@ -466,7 +466,7 @@模型
from datetime import date-現在,在
+BookInstance
類中添加以下屬性定義:現在,在
BookInstance
類中添加以下屬性定義:@property def is_overdue(self): diff --git a/files/zh-tw/learn/server-side/django/development_environment/index.html b/files/zh-tw/learn/server-side/django/development_environment/index.html index d17f3db531bf3f..4348d6eb7bc1dc 100644 --- a/files/zh-tw/learn/server-side/django/development_environment/index.html +++ b/files/zh-tw/learn/server-side/django/development_environment/index.html @@ -46,7 +46,7 @@什麼是Django設置選項?
- 運行在主系統Python環境中或在單獨的Python虛擬環境中運行。
-每個選項都需要略微不同的配置和設置。以下小節解釋了你的一些選擇。對於本文的其餘部分,我們將介紹Django在少見的操作系統上的設置,考量該模塊的其餘部分。
+每個選項都需要略微不同的配置和設置。以下小節解釋了你的一些選擇。對於本文的其餘部分,我們將介紹Django在少見的操作系統上的設置,考量該模塊的其餘部分。
注意: 其他可能的安裝選項在官方Django文檔中介紹。相應文件點擊這裡。
@@ -54,9 +54,9 @@什麼是Django設置選項?
支持哪些操作系統?
-幾乎任何可以運行Python編程語言的機器可以運行Django 網絡應用程序:Windows,Mac OSX,Linux/Unix,Solaris,僅舉幾例。幾乎任何計算機都應該在開發過程中運行Django所需的性能。
+幾乎任何可以運行Python編程語言的機器可以運行Django 網絡應用程序:Windows,Mac OSX,Linux/Unix,Solaris,僅舉幾例。幾乎任何計算機都應該在開發過程中運行Django所需的性能。
-在本文中。我們將提供Windows,Mac OS X 和Linux/Unix的說明。
+在本文中。我們將提供Windows,Mac OS X 和Linux/Unix的說明。
你應該使用什麼版本的Python?
@@ -70,7 +70,7 @@我們在哪裡下載Django?
-有三個地方可以下載Django:
+有三個地方可以下載Django:
- Python包含庫(PyPi),使用pip工具.這是獲取最新穩定版本的Django的最佳方式.
@@ -78,13 +78,13 @@本文介紹如何從PyPi安裝Django,從獲得最新的穩定版本。 +
本文介紹如何從PyPi安裝Django,從獲得最新的穩定版本。
哪個數據庫?
-Django支持四個主要數據庫(PostgreSQL,MySQL,Oracle和SQLite),還有一些社區庫,可以為其他流行的SQL和NOSQL數據庫,提供不同級別的支持。我們建議你為生產和開發,選擇相同的數據庫(儘管Django使用其對象關係映射器(ORM)抽像出許多數據庫差異,但是仍然存在可以避免的潛在問題 ).
+Django支持四個主要數據庫(PostgreSQL,MySQL,Oracle和SQLite),還有一些社區庫,可以為其他流行的SQL和NOSQL數據庫,提供不同級別的支持。我們建議你為生產和開發,選擇相同的數據庫(儘管Django使用其對象關係映射器(ORM)抽像出許多數據庫差異,但是仍然存在可以避免的潛在問題 ).
-對於本文(和本模塊的大部分),我們將使用將數據存放在文件中的SQLite數據庫。SQLite旨在用作輕量級數據庫,不能支持高級並發。然而,這確實是唯讀的應用程序的絕佳選擇。
+對於本文(和本模塊的大部分),我們將使用將數據存放在文件中的SQLite數據庫。SQLite旨在用作輕量級數據庫,不能支持高級並發。然而,這確實是唯讀的應用程序的絕佳選擇。
注意 :當你使用標準工具(django-admin)啟動你的網站項目時,Django將默認配置為使用SQLite。用來入門,這是一個很好的選擇,因為它不需要額外的配置和設置。
@@ -106,9 +106,9 @@為了使用Django,你需要安裝Python3.同樣你需要Python包管理工具 — pip3 —用來管理(安裝,更新和刪除)Django和其他Python應用程序使用的Python軟件包/庫。 +
為了使用Django,你需要安裝Python3.同樣你需要Python包管理工具 — pip3 —用來管理(安裝,更新和刪除)Django和其他Python應用程序使用的Python軟件包/庫。
-本書簡要說明如何根據需要檢查什麼版本,並根據需要安裝新版本,適用於Ubuntu Linux 16.04, Mac OS X, and Windows 10。
+本書簡要說明如何根據需要檢查什麼版本,並根據需要安裝新版本,適用於Ubuntu Linux 16.04, Mac OS X, and Windows 10。
注意 :根據你的平台,您還可以從操作系統自己的軟件包管理器或其他機制安裝Python / pip。對於大多數平台,您可以從https://www.python.org/downloads/下載所需的安裝文件,並使用適當的平台特定方法進行安裝。
@@ -133,7 +133,7 @@macOS X
python3 -V -bash: python3: command not found-你可以輕鬆從python.org安裝Python 3(以及pip3工具):
+你可以輕鬆從python.org安裝Python 3(以及pip3工具):
-
- 下載所需的安裝程序: @@ -147,7 +147,7 @@
macOS X
(一般能拖拽就拖拽)你現在可以檢查Pyhon 3來確認成功安裝,如下所示:
+你現在可以檢查Pyhon 3來確認成功安裝,如下所示:
python3 -V Python 3.7.0 @@ -159,7 +159,7 @@macOS X
Windows 10
-windows默認不安裝,但你可以從python.org輕鬆安裝它(以及pip3工具):
+windows默認不安裝,但你可以從python.org輕鬆安裝它(以及pip3工具):
-
- 下載所需版本: @@ -172,7 +172,7 @@
Windows 10
你可以通過在命令提示符中輸入以下文本來驗證是否安裝了Python:
+你可以通過在命令提示符中輸入以下文本來驗證是否安裝了Python:
py -3 -V Python 3.7.0 diff --git a/files/zh-tw/learn/server-side/django/models/index.html b/files/zh-tw/learn/server-side/django/models/index.html index cda6a0c6fa2b25..8fde7870095411 100644 --- a/files/zh-tw/learn/server-side/django/models/index.html +++ b/files/zh-tw/learn/server-side/django/models/index.html @@ -34,19 +34,19 @@-概覽
設計LocalLibrary模型
-在你投入開始編寫模型之前,花幾分鐘時間考慮我們需要存放的數據、以及不同物件之間的關係。
+在你投入開始編寫模型之前,花幾分鐘時間考慮我們需要存放的數據、以及不同物件之間的關係。
-我們知道,我們需要存放書籍的信息(標題,摘要,作者,語言,類別,ISBN),並且我們可能有多個副本(具有全域唯一的ID,可用狀態等)。我們可以存放更多關於作者的信息,而不僅僅是他的名字,或多個作者的相同或相似的名稱。我們希望能根據書名,作者名,語言和類別對信息進行排序。
+我們知道,我們需要存放書籍的信息(標題,摘要,作者,語言,類別,ISBN),並且我們可能有多個副本(具有全域唯一的ID,可用狀態等)。我們可以存放更多關於作者的信息,而不僅僅是他的名字,或多個作者的相同或相似的名稱。我們希望能根據書名,作者名,語言和類別對信息進行排序。
-在設計模型時,為每個“物件”分別設置模型(相關信息分組)是有意義的。在這種情況下,明顯的物件是書籍,書本實例和作者。
+在設計模型時,為每個“物件”分別設置模型(相關信息分組)是有意義的。在這種情況下,明顯的物件是書籍,書本實例和作者。
-你可能想要使用模型,來表示選擇列表選項(例如:選擇下拉列表),而不是硬編碼,將選項編寫進網站—這是當所有選項面臨未知、或改變時候的建議。在本網站,模型的明顯候選,包括書籍類型(例如:科幻小說,法國詩歌等)和語言(英語,法語,日語)。
+你可能想要使用模型,來表示選擇列表選項(例如:選擇下拉列表),而不是硬編碼,將選項編寫進網站—這是當所有選項面臨未知、或改變時候的建議。在本網站,模型的明顯候選,包括書籍類型(例如:科幻小說,法國詩歌等)和語言(英語,法語,日語)。
一旦我們已經決定了我們的模型和字段,我們需要考慮它們的關聯性。Django允許你來定義一對一的關聯(
-OneToOneField
),一對多(ForeignKey
)和多對多(ManyToManyField
)。思考一下,在網站中,我們將定義模型展示在下面UML關聯圖中(下圖)。如以上,我們創建了書的模型(書的通用細節),書本實例(系統中特定物理副本的書籍狀態),和作者。我們也決定了各類型模型,以便通過管理界面創建/選擇值。我們決定不給
+BookInstance:status
一個模型 —我們硬編碼了(LOAN_STATUS
)的值,因為我們不希望其改變。在每個框中,你可以看到模型名稱,字段名稱和類型,以及方法和返回類型。思考一下,在網站中,我們將定義模型展示在下面UML關聯圖中(下圖)。如以上,我們創建了書的模型(書的通用細節),書本實例(系統中特定物理副本的書籍狀態),和作者。我們也決定了各類型模型,以便通過管理界面創建/選擇值。我們決定不給
-BookInstance:status
一個模型 —我們硬編碼了(LOAN_STATUS
)的值,因為我們不希望其改變。在每個框中,你可以看到模型名稱,字段名稱和類型,以及方法和返回類型。該圖顯示模型之間的關係,包括它們的多重性。多重性是圖中的數字,顯示可能存在於關係中的每個模型的數量(最大值和最小值)。例如,盒子之間的連接線,顯示書和類型相關。書模型中數字表明,一本書必須有一個或多個類型(想要多少就多少),而類型(Genres)模型線的另一端的數字(0..*),表明它可以有零個或多個關聯書本(可以有這個書籍類別,也有對應的書;也可以是有這個書籍類別,但沒有對應的書)。
+該圖顯示模型之間的關係,包括它們的多重性。多重性是圖中的數字,顯示可能存在於關係中的每個模型的數量(最大值和最小值)。例如,盒子之間的連接線,顯示書和類型相關。書模型中數字表明,一本書必須有一個或多個類型(想要多少就多少),而類型(Genres)模型線的另一端的數字(0..*),表明它可以有零個或多個關聯書本(可以有這個書籍類別,也有對應的書;也可以是有這個書籍類別,但沒有對應的書)。
@@ -85,11 +85,11 @@模型定義
"""String for representing the MyModelName object (in Admin site etc.).""" return self.field_name在下面章節中,我們將更詳細解釋模型的每個功能。
+在下面章節中,我們將更詳細解釋模型的每個功能。
字段
-模型可以有任意數量的字段、任何類型的字段 — 每個字段都表示我們要存放在我們的一個資料庫中的一欄數據(a column of data)。每筆資料庫記錄(列 row)將由每個字段值之一組成。我們來看看上面看到的例子。
+模型可以有任意數量的字段、任何類型的字段 — 每個字段都表示我們要存放在我們的一個資料庫中的一欄數據(a column of data)。每筆資料庫記錄(列 row)將由每個字段值之一組成。我們來看看上面看到的例子。
my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')@@ -97,16 +97,16 @@在上面例子中,有個叫
my_field_name
的單一字段,其類型為models.CharField
— 這意味著這個字段將會包含字母、數字字符串。使用特定的類別分配字段類型,這些類別,決定了用於將數據存放在資料庫中的記錄的類型,以及從HTML表單接收到值(即構成有效值)時使用的驗證標準。字段類型還可以獲取參數,進一步指定字段如何存放或如何被使用。在這裡的情況下,我們給了字段兩個參數: +在上面例子中,有個叫
my_field_name
的單一字段,其類型為models.CharField
— 這意味著這個字段將會包含字母、數字字符串。使用特定的類別分配字段類型,這些類別,決定了用於將數據存放在資料庫中的記錄的類型,以及從HTML表單接收到值(即構成有效值)時使用的驗證標準。字段類型還可以獲取參數,進一步指定字段如何存放或如何被使用。在這裡的情況下,我們給了字段兩個參數:-
max_length=20
— 表示此字段中值的最大長度為20個字符的狀態。help_text="Enter field documentation"
— 提供一個幫助用戶的文本標籤,讓用戶知道當前透過HTML表單輸入時要提供什麼值。字段名稱用於在視圖和模版中引用它。字段還有一個標籤,它被指定一個參數(
+verbose_name
),或者通過大寫字段的變量名的第一個字母,並用空格替換下劃線(例如my_field_name
的默認標籤為 My field name )。字段名稱用於在視圖和模版中引用它。字段還有一個標籤,它被指定一個參數(
-verbose_name
),或者通過大寫字段的變量名的第一個字母,並用空格替換下劃線(例如my_field_name
的默認標籤為 My field name )。如果模型在表單中呈現(例如:在管理站點中),則聲明該字段的順序,將影響其默認順序,但可能會被覆蓋。
+如果模型在表單中呈現(例如:在管理站點中),則聲明該字段的順序,將影響其默認順序,但可能會被覆蓋。
常用字段參數
@@ -122,11 +122,11 @@常用字段參數
- primary_key :如果是True,將當前字段設置為模型的主鍵(主鍵是被指定用來唯一辨識所有不同表記錄的特殊數據庫欄位(column))。如果沒有指定字段作為主鍵,則Django將自動為此添加一個字段。
-還有許多其他選項 — 你可以在這裡看到完整的字段選項。
+還有許多其他選項 — 你可以在這裡看到完整的字段選項。
常用字段類型
-以下列表描述了一些更常用的字段類型。
+以下列表描述了一些更常用的字段類型。
-
- CharField 是用來定義短到中等長度的字段字符串。你必須指定
@@ -140,9 +140,9 @@max_length
要存儲的數據。常用字段類型
- ManyToManyField 用於指定多對多關係(例如,一本書可以有幾種類型,每種類型可以包含幾本書)。在我們的圖書館應用程序中,我們將非常類似地使用它們 ForeignKeys,但是可以用更複雜的方式來描述組之間的關係。這些具有參數
on_delete
來定義關聯記錄被刪除時會發生什麼(例如,值models.SET_NULL
將簡單地設置為值 NULL )。還有許多其他類型的字段,包括不同類型數字的字段(大整數,小整數,浮點數),布林值,URLs,唯一 ids 和其他 “時間相關” 的信息(持續時間,時間等)。你可以查閱完整列表 .
+還有許多其他類型的字段,包括不同類型數字的字段(大整數,小整數,浮點數),布林值,URLs,唯一 ids 和其他 “時間相關” 的信息(持續時間,時間等)。你可以查閱完整列表 .
- +元數據(Metadata)
@@ -152,29 +152,29 @@元數據(Metadata)
ordering = ['-my_field_name'] -此元數據最有用的功能之一是控制在查詢模型類型時返回之記錄的默認排序。你可以透過在
+ordering
屬性的字段名稱列表中指定匹配順序來執行此操作,如上所示。排序將依賴字段的類型(字符串字段按字母順序排序,而日期字段按時間順序排序)。如上所示,你可以使用減號(-)前綴字段名稱以反轉排序順序。此元數據最有用的功能之一是控制在查詢模型類型時返回之記錄的默認排序。你可以透過在
-ordering
屬性的字段名稱列表中指定匹配順序來執行此操作,如上所示。排序將依賴字段的類型(字符串字段按字母順序排序,而日期字段按時間順序排序)。如上所示,你可以使用減號(-)前綴字段名稱以反轉排序順序。例如,如果我們選擇依照此預設來排列書單:
+例如,如果我們選擇依照此預設來排列書單:
ordering = ['title', '-pubdate']-書單通過標題依據--字母排序--排列,從A到Z,然後再依每個標題的出版日期,從最新到最舊排列。
+書單通過標題依據--字母排序--排列,從A到Z,然後再依每個標題的出版日期,從最新到最舊排列。
-另一個常見的屬性是
+verbose_name
,一個verbose_name
說明單數和複數形式的類別。另一個常見的屬性是
verbose_name
,一個verbose_name
說明單數和複數形式的類別。verbose_name = 'BetterName'-其他有用的屬性允許你為模型創建和應用新的“訪問權限”(預設權限會被自動套用),允許基於其他的字段排序,或聲明該類是”抽象的“(你無法創建的記錄基類,並將由其他型號派生)。
+其他有用的屬性允許你為模型創建和應用新的“訪問權限”(預設權限會被自動套用),允許基於其他的字段排序,或聲明該類是”抽象的“(你無法創建的記錄基類,並將由其他型號派生)。
-許多其他元數據選項控制模型中必須使用哪些數據庫以及數據的存儲方式。(如果你需要模型映射一個現有數據庫,這會有用)。
+許多其他元數據選項控制模型中必須使用哪些數據庫以及數據的存儲方式。(如果你需要模型映射一個現有數據庫,這會有用)。
-完整有用的元數據選項在這裡Model metadata options (Django docs).
+完整有用的元數據選項在這裡Model metadata options (Django docs).
方法(Methods)
-一個模型也可以有方法。
+一個模型也可以有方法。
-最起碼,在每個模型中,你應該定義標準的Python 類方法
+__str__()
,來為每個物件返回一個人類可讀的字符串。此字符用於表示管理站點的各個記錄(以及你需要引用模型實例的任何其他位置)。通常這將返回模型中的標題或名稱字段。最起碼,在每個模型中,你應該定義標準的Python 類方法
__str__()
,來為每個物件返回一個人類可讀的字符串。此字符用於表示管理站點的各個記錄(以及你需要引用模型實例的任何其他位置)。通常這將返回模型中的標題或名稱字段。def __str__(self): return self.field_name@@ -187,9 +187,9 @@注意 :假設你將使用URL
/myapplication/mymodelname/2
來顯示模型的單個記錄(其中“2”是id特定記錄),則需要創建一個URL映射器來將響應和id傳遞給“模型詳細視圖” (這將做出顯示記錄所需的工作)。以上示例中,reverse()
函數可以“反轉”你的url映射器(在上訴命名為“model-detail-view”的案例中,以創建正確格式的URL。 +注意 :假設你將使用URL
-/myapplication/mymodelname/2
來顯示模型的單個記錄(其中“2”是id特定記錄),則需要創建一個URL映射器來將響應和id傳遞給“模型詳細視圖” (這將做出顯示記錄所需的工作)。以上示例中,reverse()
函數可以“反轉”你的url映射器(在上訴命名為“model-detail-view”的案例中,以創建正確格式的URL。當然要做這個工作,你還是要寫URL映射,視圖和模版!
+當然要做這個工作,你還是要寫URL映射,視圖和模版!
你可以定義一些你喜歡的其他方法,並從你的代碼或模版調用它們(只要它們不帶任何參數)。
diff --git a/files/zh-tw/learn/server-side/django/skeleton_website/index.html b/files/zh-tw/learn/server-side/django/skeleton_website/index.html index 11e3cba2c825c7..b6c3e02f8328a6 100644 --- a/files/zh-tw/learn/server-side/django/skeleton_website/index.html +++ b/files/zh-tw/learn/server-side/django/skeleton_website/index.html @@ -39,7 +39,7 @@概覽
- 為每個應用分配url。
-為 locallibrary 這個項目創建的網站文件夾和它的工程文件夾都命名為locallibrary。我們只創建一個名為catalog的應用。最高層的項目文件結構如下所示:
+為 locallibrary 這個項目創建的網站文件夾和它的工程文件夾都命名為locallibrary。我們只創建一個名為catalog的應用。最高層的項目文件結構如下所示:
locallibrary/ # Website folder manage.py # Script to run Django tools for this project (created using django-admin) @@ -71,7 +71,7 @@-創建專案項目
urls.py wsgi.pylocallibrary項目的子文件夾是整個網站的進入點:
+locallibrary項目的子文件夾是整個網站的進入點:
-
- __init__.py 是一個空文件,指示 Python 將此目錄視為 Python 套件。
@@ -80,7 +80,7 @@創建專案項目
- wsgi.py 幫助Django應用和網絡服務器間的通訊。你可以把這個當作模板。
manage.py腳本可以創建應用,和資料庫通訊,啟動開發用網絡服務器。
+manage.py腳本可以創建應用,和資料庫通訊,啟動開發用網絡服務器。
創建 catalog 應用
@@ -89,16 +89,16 @@創建 catalog 應用
python3 manage.py startapp catalog--注意: Linux/Mac OS X應用可以使用上面的命令。在windows平台下應該改為:
+py -3 manage.py startapp catalog
注意: Linux/Mac OS X應用可以使用上面的命令。在windows平台下應該改為:
-py -3 manage.py startapp catalog
如果你是windows系統,在這個部分用
+py -3
替代python3
。如果你是windows系統,在這個部分用
py -3
替代python3
。如果您使用的是Python 3.7.0,則應使用
py manage.py startapp catalog
這個工具創建了一個新的文件夾,並為該應用創建了不同的文件(下面黑體所示)。絕大多數文件的命名和它們的目的有關(比如視圖函數就是views.py,模型就是models.py,測試是tests.py,網站管理設置是admin.py,註冊應用是apps.py),並且還包含了為項目所用的最小模板。
+這個工具創建了一個新的文件夾,並為該應用創建了不同的文件(下面黑體所示)。絕大多數文件的命名和它們的目的有關(比如視圖函數就是views.py,模型就是models.py,測試是tests.py,網站管理設置是admin.py,註冊應用是apps.py),並且還包含了為項目所用的最小模板。
-執行命令後的文件夾結構如下所示:
+執行命令後的文件夾結構如下所示:
locallibrary/ manage.py @@ -113,7 +113,7 @@-創建 catalog 應用
migrations/除上面所說的文件外,我們還有:
+除上面所說的文件外,我們還有:
- 一個migration文件夾,用來存放 “migrations” ——當你修改你的數據模型時,這個文件會自動升級你的資料庫。
@@ -126,9 +126,9 @@創建 catalog 應用
註冊catalog應用
-既然應用已經創建好了,我們還必須在項目裡註冊它,以便工具在運行時它會包括在裡面(比如在數據庫裡添加模型時)。在項目的settings裡,把應用添加進
+INSTALLED_APPS
,就完成了註冊。既然應用已經創建好了,我們還必須在項目裡註冊它,以便工具在運行時它會包括在裡面(比如在數據庫裡添加模型時)。在項目的settings裡,把應用添加進
-INSTALLED_APPS
,就完成了註冊。打開項目設置文件 locallibrary/locallibrary/settings.py找到
+INSTALLED_APPS
列表裡的定義。如下所示,在列表的最後添加新的一行。打開項目設置文件 locallibrary/locallibrary/settings.py找到
INSTALLED_APPS
列表裡的定義。如下所示,在列表的最後添加新的一行。INSTALLED_APPS = [ 'django.contrib.admin', @@ -148,9 +148,9 @@註冊catalog應用
配置資料庫
-現在可以為項目配置資料庫了——為了避免性能上的差異,最好在生產和開發中使用同一種資料庫。你可以在資料庫 裡找到不同的設置方法(Django文檔)。
+現在可以為項目配置資料庫了——為了避免性能上的差異,最好在生產和開發中使用同一種資料庫。你可以在資料庫 裡找到不同的設置方法(Django文檔)。
-在這個項目裡,我們使用SQLite。因為在展示用的數據庫中,我們不會有很多並發存取的行為。同時,也因為SQLite不需要額外的配置工作。你可以在settings.py裡看到這個數據庫怎樣配置的。(更多信息如下所示)
+在這個項目裡,我們使用SQLite。因為在展示用的數據庫中,我們不會有很多並發存取的行為。同時,也因為SQLite不需要額外的配置工作。你可以在settings.py裡看到這個數據庫怎樣配置的。(更多信息如下所示)
DATABASES = { 'default': { @@ -168,7 +168,7 @@其他項目設置
TIME_ZONE = 'Asia/Taipei'-有兩個設置你現在不會用到,不過你應該留意:
+有兩個設置你現在不會用到,不過你應該留意:
- @@ -177,9 +177,9 @@
SECRET_KEY
. 這個密匙值,是Django網站安全策略的一部分。如果在開發環境中,沒有保護好這個密匙,把代碼投入生產環境時,最好用不同的密匙代替。(可能從環境變量或文件中讀取)。其他項目設置
鏈接URL映射器
-在項目文件夾裡,創建網站時同時生成了URL映射器(urls.py)。儘管你可以用它來管理所有的URL映射,但是更常用的做法是把URL映射留到它們相關的應用中。
+在項目文件夾裡,創建網站時同時生成了URL映射器(urls.py)。儘管你可以用它來管理所有的URL映射,但是更常用的做法是把URL映射留到它們相關的應用中。
-打開locallibrary/locallibrary/urls.py 注意指導文字解釋了一些使用URL映射器的方法。
+打開locallibrary/locallibrary/urls.py 注意指導文字解釋了一些使用URL映射器的方法。
"""locallibrary URL Configuration @@ -204,7 +204,7 @@-鏈接URL映射器
]URL映射通過
+urlpatterns
變量管理,它是一個path()
函數的Python列表。每個path()
函數,要么將URL式樣(URL pattern)關聯到特定視圖( specific view),當模式匹配時將會顯示,要么關聯到某個URL式樣列表的測試代碼。(第二種情況下,URL式樣是目標模型裡的“基本URL”).urlpatterns
列表初始化定義了單一函數,把所有帶有 'admin/' 模式的 URL,映射到admin.site.urls
。這個函數,包含了Administration應用自己的URL映射定義。URL映射通過
urlpatterns
變量管理,它是一個path()
函數的Python列表。每個path()
函數,要么將URL式樣(URL pattern)關聯到特定視圖( specific view),當模式匹配時將會顯示,要么關聯到某個URL式樣列表的測試代碼。(第二種情況下,URL式樣是目標模型裡的“基本URL”).urlpatterns
列表初始化定義了單一函數,把所有帶有 'admin/' 模式的 URL,映射到admin.site.urls
。這個函數,包含了Administration應用自己的URL映射定義。-注意:
@@ -221,9 +221,9 @@path()
中的路由是一個字符串,用於定義要匹配的URL模式。該字符串可能包括一個命名變量(在尖括號中),例如'catalog/<id>/'
。此模式將匹配 /catalog/any_chars/ 等URL,並將any_chars 作為參數名稱為id
的字符串,傳遞給視圖。我們將在後面的主題中,進一步討論路徑方法和路由模式鏈接URL映射器
] -現在我們把我們網站的根URL(例如
+127.0.0.1:8000
),重新導向URL127.0.0.1:8000/catalog/
;這是項目中唯一的應用,所以我們最好這樣做。為了完成這個目標,我們使用一個特別的視圖函數(RedirectView
),當path()
函數中的 url 式樣被識別以後(在這個例子中是根 url),就會把第一個參數,也就是新的相對 URL ,重定向到(/catalog/
)。現在我們把我們網站的根URL(例如
-127.0.0.1:8000
),重新導向URL127.0.0.1:8000/catalog/
;這是項目中唯一的應用,所以我們最好這樣做。為了完成這個目標,我們使用一個特別的視圖函數(RedirectView
),當path()
函數中的 url 式樣被識別以後(在這個例子中是根 url),就會把第一個參數,也就是新的相對 URL ,重定向到(/catalog/
)。把下面的代碼加到文件最後:
+把下面的代碼加到文件最後:
#Add URL maps to redirect the base URL to our application from django.views.generic import RedirectView @@ -278,15 +278,15 @@鏈接URL映射器
測試網站框架
-現在我們有了一個完整的框架項目。這個網站現在還什麼都不能做,但是我們仍然要運行,以確保我們的更改是有效的。
+現在我們有了一個完整的框架項目。這個網站現在還什麼都不能做,但是我們仍然要運行,以確保我們的更改是有效的。
-在運行前,我們應該先運行數據庫遷移。這會更新我們的數據庫並且包含所有安裝的應用(同時去除一些警告)。
+在運行前,我們應該先運行數據庫遷移。這會更新我們的數據庫並且包含所有安裝的應用(同時去除一些警告)。
運行資料庫遷移
-Django使用對象關係映射器(ORM),將Django代碼中的模型定義,映射到底層資料庫使用的數據結構。當我們更改模型定義時,Django會跟踪更改,並創建資料庫遷移腳本(位於 /locallibrary/catalog/migrations/ ),來自動遷移資料庫中的底層數據結構。
+Django使用對象關係映射器(ORM),將Django代碼中的模型定義,映射到底層資料庫使用的數據結構。當我們更改模型定義時,Django會跟踪更改,並創建資料庫遷移腳本(位於 /locallibrary/catalog/migrations/ ),來自動遷移資料庫中的底層數據結構。
-當我們創建網站時,Django會自動添加一些模型,供網站的管理部分使用(稍後我們會解釋)。運行以下命令,來定義資料庫中這些模型的表(確認你位於包含 manage.py 的目錄中):
+當我們創建網站時,Django會自動添加一些模型,供網站的管理部分使用(稍後我們會解釋)。運行以下命令,來定義資料庫中這些模型的表(確認你位於包含 manage.py 的目錄中):
python3 manage.py makemigrations python3 manage.py migrate @@ -296,9 +296,9 @@運行資料庫遷移
重要: 每次模型改變,都需要運行以上命令,來影響需要存放的數據結構(包括添加和刪除整個模型和單個字段)。
該
+makemigrations
命令,創建(但不實施)項目中安裝的所有應用程序的遷移(你可以指定應用程序名稱,也可以為單個項目運行遷移)。這讓你有機會在應用這些遷移之前,檢查這些遷移代碼—當你是Django專家時,你可以選擇稍微調整它們。該
-makemigrations
命令,創建(但不實施)項目中安裝的所有應用程序的遷移(你可以指定應用程序名稱,也可以為單個項目運行遷移)。這讓你有機會在應用這些遷移之前,檢查這些遷移代碼—當你是Django專家時,你可以選擇稍微調整它們。這個
+migrate
命令,真正對你的資料庫實施遷移(Django跟踪哪些已添加到當前資料庫)。這個
migrate
命令,真正對你的資料庫實施遷移(Django跟踪哪些已添加到當前資料庫)。注意: 參見 Migrations (Django 文件) ,了解較少使用的遷移命令的其他信息。
@@ -343,16 +343,16 @@運行網站
挑戰自我
-該 catalog/ 目錄包含應用程序的視圖、模型、和應用的其他部分,你可以打開這些文件並查看樣板。
+該 catalog/ 目錄包含應用程序的視圖、模型、和應用的其他部分,你可以打開這些文件並查看樣板。
-如上所述,管理站點的URL映射,已經添加到項目的 urls.py。在瀏覽器中查看管理區域,看看會發生什麼(你可以從上面映射,推斷正確的URL)。
+如上所述,管理站點的URL映射,已經添加到項目的 urls.py。在瀏覽器中查看管理區域,看看會發生什麼(你可以從上面映射,推斷正確的URL)。
總結
-你現在已經創建了一個完整的骨架網站項目,你可以繼續加入網址、模型、視圖、和模版。
+你現在已經創建了一個完整的骨架網站項目,你可以繼續加入網址、模型、視圖、和模版。
現在,Local Library website的骨架已經完成並運行了,是時候開始寫些代碼,讓網站做些它應該做的事了。
diff --git a/files/zh-tw/learn/server-side/express_nodejs/deployment/index.html b/files/zh-tw/learn/server-side/express_nodejs/deployment/index.html index 2dd2662915d09c..85f4634a8e3c1d 100644 --- a/files/zh-tw/learn/server-side/express_nodejs/deployment/index.html +++ b/files/zh-tw/learn/server-side/express_nodejs/deployment/index.html @@ -208,7 +208,7 @@使用 Helmet 避免被常見 ...
-注意: 上面的命令,添加了對大多數站點有意義的可用標頭子集。您可以按照 npm 上的說明,根據需要添加/禁用特定標頭。
+注意: 上面的命令,添加了對大多數站點有意義的可用標頭子集。您可以按照 npm 上的說明,根據需要添加/禁用特定標頭。
例子:在 Heroku 上安裝本地圖書館
diff --git a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.html b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.html index f60efa5eafe226..0d213e3d6ec714 100644 --- a/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/zh-tw/learn/server-side/express_nodejs/mongoose/index.html @@ -85,19 +85,19 @@在本地圖書館使用
設計本地圖書館的模型
-在您開始編寫模型之前,花幾分鐘的時間思考,我們需要儲存的數據以及不同對象之間的關係。
+在您開始編寫模型之前,花幾分鐘的時間思考,我們需要儲存的數據以及不同對象之間的關係。
-我們知道,我們需要儲存有關書籍的訊息(標題,摘要,作者,種類,國際標準書號),以及我們可能有多個副本可用(具有全域唯一ID,可用狀態等)。我們可能需要存儲有關作者的更多訊息,而不僅僅是他們的名字,並且可能有多個作者,具有相同或相似的名稱。我們希望能夠根據書名,作者,種類和類別對訊息進行分類。
+我們知道,我們需要儲存有關書籍的訊息(標題,摘要,作者,種類,國際標準書號),以及我們可能有多個副本可用(具有全域唯一ID,可用狀態等)。我們可能需要存儲有關作者的更多訊息,而不僅僅是他們的名字,並且可能有多個作者,具有相同或相似的名稱。我們希望能夠根據書名,作者,種類和類別對訊息進行分類。
-在設計模型時,對於每個“對象”(相關訊息組)都有獨立的模型,是有意義的。在這種情況下,明顯的對像是書籍,書籍實例和作者。
+在設計模型時,對於每個“對象”(相關訊息組)都有獨立的模型,是有意義的。在這種情況下,明顯的對像是書籍,書籍實例和作者。
-您可能還希望,使用模型來表示選擇列表選項(例如,選擇的下拉列表),而不是將選項硬編碼到網站本身— 在無法預先知道所有選項,或者可能更改時,更建議使用模型來表示。很明顯的,書本類型是這種模型的可能人選(例如科幻小說,法國詩歌等)。
+您可能還希望,使用模型來表示選擇列表選項(例如,選擇的下拉列表),而不是將選項硬編碼到網站本身— 在無法預先知道所有選項,或者可能更改時,更建議使用模型來表示。很明顯的,書本類型是這種模型的可能人選(例如科幻小說,法國詩歌等)。
-一旦我們決定了我們的模型和字段,我們就需要考慮它們之間的關係。
+一旦我們決定了我們的模型和字段,我們就需要考慮它們之間的關係。
-考慮到這一點,下面的UML關聯圖,顯示了我們在這種情況下定義的模型(一個框對應一個模型)。如上所述,我們創建了以下模型,圖書(本書的通用細節),書本實例(系統中可用圖書的特定實際副本的狀態)和作者。我們還決定建立一個種類模型,以便可以動態創建它的值,而不是將下拉選項硬編碼。我們已經決定不為書本實例:狀態
+BookInstance:status
建立模型—我們將硬編碼可接受的值,因為我們不希望這些值發生變化。在下圖每個框中,您可以看到模型名稱,字段名稱和類型,以及方法及其返回類型。考慮到這一點,下面的UML關聯圖,顯示了我們在這種情況下定義的模型(一個框對應一個模型)。如上所述,我們創建了以下模型,圖書(本書的通用細節),書本實例(系統中可用圖書的特定實際副本的狀態)和作者。我們還決定建立一個種類模型,以便可以動態創建它的值,而不是將下拉選項硬編碼。我們已經決定不為書本實例:狀態
-BookInstance:status
建立模型—我們將硬編碼可接受的值,因為我們不希望這些值發生變化。在下圖每個框中,您可以看到模型名稱,字段名稱和類型,以及方法及其返回類型。下圖還顯示了模型之間的關係,包括它們的多重性。多重性是圖中顯示可能存在於關係中的每個模型的數量(最大值和最小值)的數字。例如,框之間的連接線,顯示書本
+Book
和種類Genre
是相關的。靠近書本Book
模型的數字,表明一本書必須有零個或多個種類(您想要多少都可以),而種類Genre
旁邊一行的數字,表明它可以有零個或多個相關書籍。下圖還顯示了模型之間的關係,包括它們的多重性。多重性是圖中顯示可能存在於關係中的每個模型的數量(最大值和最小值)的數字。例如,框之間的連接線,顯示書本
Book
和種類Genre
是相關的。靠近書本Book
模型的數字,表明一本書必須有零個或多個種類(您想要多少都可以),而種類Genre
旁邊一行的數字,表明它可以有零個或多個相關書籍。注意: 正如我們在下面的Mongoose入門中所討論的那樣,通常只需要在一個模型中定義文檔/模型之間關係的字段(通過在另一個模型中搜索相關的
@@ -156,9 +156,9 @@_id
仍然可以找到反向關係)。下面我們選擇在書本綱要(Book schema)中定義Book/Genre和Book/Author之間的關係,以及書本實例綱要(BookInstance Schema)中Book/BookInstance之間的關係。這種選擇有點武斷—我們同樣可以在其他綱要中擁有該字段。連接到MongoDB
定義並創建模型
-模型使用
+Schema
接口進行定義。Schema允許您定義存儲在每個文檔中的字段,及其驗證要求和默認值。此外,您可以定義靜態和實例助手方法,以更輕鬆地處理數據類型,以及可以像其他任何字段一樣使用的虛擬屬性,但實際上並不存儲在數據庫中(我們稍後將討論)。模型使用
-Schema
接口進行定義。Schema允許您定義存儲在每個文檔中的字段,及其驗證要求和默認值。此外,您可以定義靜態和實例助手方法,以更輕鬆地處理數據類型,以及可以像其他任何字段一樣使用的虛擬屬性,但實際上並不存儲在數據庫中(我們稍後將討論)。然後,綱要Schemas被
+mongoose.model()
方法“編譯”為模型。擁有模型後,您可以使用它來查找,創建,更新和刪除給定類型的對象。然後,綱要Schemas被
mongoose.model()
方法“編譯”為模型。擁有模型後,您可以使用它來查找,創建,更新和刪除給定類型的對象。-注意:每個模型都映射到MongoDB數據庫中的文檔集合。這些文檔將包含模型綱要
@@ -166,7 +166,7 @@Schema
中定義的字段/綱要型態。定義並創建模型
定義綱要Schemas
-下面的代碼片段,顯示了您可以如何定義一個簡單的綱要。首先
+require()
mongoose,然後使用Schema構造函數,創建一個新的Schema實例,在構造函數的對象參數中,定義其中的各個字段。下面的代碼片段,顯示了您可以如何定義一個簡單的綱要。首先
require()
mongoose,然後使用Schema構造函數,創建一個新的Schema實例,在構造函數的對象參數中,定義其中的各個字段。//Require Mongoose var mongoose = require('mongoose'); @@ -180,11 +180,11 @@在上面的例子中,我們只有兩個字段,一個字符串和一個日期。在接下來的部分中,我們將展示一些其他的字段類型,驗證和其他方法。 +
在上面的例子中,我們只有兩個字段,一個字符串和一個日期。在接下來的部分中,我們將展示一些其他的字段類型,驗證和其他方法。
創建模型
-使用
+mongoose.model()
方法從綱要創建模型:使用
mongoose.model()
方法從綱要創建模型:// Define schema var Schema = mongoose.Schema; @@ -205,7 +205,7 @@綱要型態(字段)
-綱要schema可以有任意數量的字段 — 每個字段代表存儲在MongoDB 文檔中的字段。如下的示例綱要,顯示許多常見字段類型及其聲明方式。
+綱要schema可以有任意數量的字段 — 每個字段代表存儲在MongoDB 文檔中的字段。如下的示例綱要,顯示許多常見字段類型及其聲明方式。
var schema = new Schema( { @@ -221,7 +221,7 @@大多數綱要型態SchemaTypes(“type:”之後或字段名稱之後的描述符)都是自解釋的。例外情況是: +
大多數綱要型態SchemaTypes(“type:”之後或字段名稱之後的描述符)都是自解釋的。例外情況是:
- @@ -229,7 +229,7 @@
ObjectId
:表示數據庫中模型的特定實例。例如,一本書可能會使用它來表示其作者對象。這實際上將包含指定對象的唯一ID (_id
) 。我們可以使用populate()
方法,在需要時提取相關訊息。該代碼還顯示了聲明一個字段的兩種方式: +
該代碼還顯示了聲明一個字段的兩種方式:
- 字段名稱和類型作為鍵值對(即是,像上面的
@@ -243,13 +243,13 @@name
,binary
andliving
)。有關選項的更多訊息,請參閱SchemaTypes(Mongoose docs)。 +
有關選項的更多訊息,請參閱SchemaTypes(Mongoose docs)。
驗證
-Mongoose 提供內置和自定義驗證器,以及同步和異步驗證器。它允許您在所有情況下,指定可接受的範圍或值,以及驗證失敗的錯誤消息。
+Mongoose 提供內置和自定義驗證器,以及同步和異步驗證器。它允許您在所有情況下,指定可接受的範圍或值,以及驗證失敗的錯誤消息。
-內置的驗證器包括:
+內置的驗證器包括:
- 所有SchemaTypes都具有內置的必需驗證器。這用於指定,是否必須提供該字段才能保存文檔。
@@ -263,7 +263,7 @@下面的示例(從Mongoose文檔稍微修改)顯示瞭如何指定一些驗證器類型和錯誤消息: +
下面的示例(從Mongoose文檔稍微修改)顯示瞭如何指定一些驗證器類型和錯誤消息:
var breakfastSchema = new Schema({ @@ -280,33 +280,33 @@
有關字段驗證的完整訊息,請參閱驗證(Mongoose docs)。 +
有關字段驗證的完整訊息,請參閱驗證(Mongoose docs)。
虛擬屬性
-虛擬屬性是您可以獲取和設置的文檔屬性,但不會持久保存到MongoDB。getter 對格式化或組合字段非常有用,而setter 可用於將單個值分解為多個值,以進行存儲。
+虛擬屬性是您可以獲取和設置的文檔屬性,但不會持久保存到MongoDB。getter 對格式化或組合字段非常有用,而setter 可用於將單個值分解為多個值,以進行存儲。
-文檔中的示例,從名字和姓氏字段構造(並解構)一個全名虛擬屬性,這比每次在模板中使用全名更簡單,更清晰。
+文檔中的示例,從名字和姓氏字段構造(並解構)一個全名虛擬屬性,這比每次在模板中使用全名更簡單,更清晰。
-注意:我們將使用庫中的虛擬屬性,來為每個使用路徑和記錄的
_id
值的模型記錄,定義唯一的URL。欲了解更多訊息,請參閱虛擬(Mongoose文檔)。
+欲了解更多訊息,請參閱虛擬(Mongoose文檔)。
方法和查詢幫助
-綱要schema也可以有實例方法,靜態方法和查詢助手。實例和靜態方法很相似,但有明顯的區別,即實例方法與特定記錄相關聯,並且可以訪問當前對象。查詢助手允許您擴展mongoose的鍊式查詢構建器API(例如,除了
+find()
,findOne()
和findById()
方法外,還允許您添加一個“byName”查詢。綱要schema也可以有實例方法,靜態方法和查詢助手。實例和靜態方法很相似,但有明顯的區別,即實例方法與特定記錄相關聯,並且可以訪問當前對象。查詢助手允許您擴展mongoose的鍊式查詢構建器API(例如,除了
find()
,findOne()
和findById()
方法外,還允許您添加一個“byName”查詢。使用模型
-一旦創建了綱要,就可以使用它來創建模型。該模型代表數據庫中可以搜索的文檔集合,而模型的實例代表您可以保存和檢索的單個文檔。
+一旦創建了綱要,就可以使用它來創建模型。該模型代表數據庫中可以搜索的文檔集合,而模型的實例代表您可以保存和檢索的單個文檔。
-我們在下面簡要介紹一下。有關更多訊息,請參閱:模型(Mongoose docs)。
+我們在下面簡要介紹一下。有關更多訊息,請參閱:模型(Mongoose docs)。
創建和修改文檔
-要創建記錄,您可以定義模型的實例,然後調用
+save()
。下面的例子假設,SomeModel是我們從綱要創建的模型(帶有單一字段“name” )。要創建記錄,您可以定義模型的實例,然後調用
save()
。下面的例子假設,SomeModel是我們從綱要創建的模型(帶有單一字段“name” )。// Create an instance of model SomeModel var awesome_instance = new
SomeModel({ name: 'awesome' }); @@ -318,9 +318,9 @@
創建記錄(以及更新,刪除和查詢)是異步操作— 您提供在操作完成時調用的回調。API使用錯誤優先參數約定,因此回調的第一個參數將始終為錯誤值(或null)。如果API返回一些結果,則將作為第二個參數提供。 +
創建記錄(以及更新,刪除和查詢)是異步操作— 您提供在操作完成時調用的回調。API使用錯誤優先參數約定,因此回調的第一個參數將始終為錯誤值(或null)。如果API返回一些結果,則將作為第二個參數提供。
-您還可以使用
+create()
,同時定義模型實例,並保存模型實例。回調將為第一個參數返回錯誤,為第二個參數返回新創建的模型實例。您還可以使用
create()
,同時定義模型實例,並保存模型實例。回調將為第一個參數返回錯誤,為第二個參數返回新創建的模型實例。SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) { if (err) return handleError(err); @@ -343,7 +343,7 @@
尋找紀錄
-可以使用查詢方法搜索記錄,將查詢條件指定為JSON 文檔。下面的代碼片段,顯示瞭如何在數據庫中,找到所有參加網球運動的運動員,只返回運動員姓名和年齡的字段。這裡我們只指定一個匹配的字段(運動 sport),但您可以添加更多條件,指定正則表達式標準,或完全刪除條件以返回所有運動員。
+可以使用查詢方法搜索記錄,將查詢條件指定為JSON 文檔。下面的代碼片段,顯示瞭如何在數據庫中,找到所有參加網球運動的運動員,只返回運動員姓名和年齡的字段。這裡我們只指定一個匹配的字段(運動 sport),但您可以添加更多條件,指定正則表達式標準,或完全刪除條件以返回所有運動員。
var Athlete = mongoose.model('Athlete', yourSchema); @@ -379,9 +379,9 @@
上面我們在
find()
方法中,定義了查詢條件。我們也可以使用where()
函數來執行此操作,並且我們可以使用點運算符( . )將查詢的所有部分鏈接在一起,而不是分別添加它們。 +上面我們在
-find()
方法中,定義了查詢條件。我們也可以使用where()
函數來執行此操作,並且我們可以使用點運算符( . )將查詢的所有部分鏈接在一起,而不是分別添加它們。下面的代碼片段,與我們上面的查詢相同,並有年齡的附加條件。
+下面的代碼片段,與我們上面的查詢相同,並有年齡的附加條件。
-Athlete. find(). @@ -392,7 +392,7 @@
find() 方法獲取所有匹配的記錄,但通常你只想獲得一個匹配。以下方法可以查詢單個記錄:
+find() 方法獲取所有匹配的記錄,但通常你只想獲得一個匹配。以下方法可以查詢單個記錄:
- @@ -404,13 +404,13 @@
findById()
:用指定的id
查找文檔(每個文檔都有一個唯一的id
)。注意:還有一個
count()
方法,您可以使用它來獲取與條件匹配的項目數。如果您想要在不實際提取記錄的情況下執行計數,這非常有用。查詢可以做更多的事情。有關更多訊息,請參閱:查詢(Mongoose文檔)。
+查詢可以做更多的事情。有關更多訊息,請參閱:查詢(Mongoose文檔)。
運用相關文檔— population方法
-您可以使用
+ObjectId
綱要字段,從一個文檔/模型實例,創建一對一引用,或者使用ObjectIds
數組,從一個文檔創建一對多的引用。該字段存儲相關模型的ID。如果需要關聯文檔的實際內容,可以在查詢中使用populate()
方法,將id替換為實際數據。您可以使用
-ObjectId
綱要字段,從一個文檔/模型實例,創建一對一引用,或者使用ObjectIds
數組,從一個文檔創建一對多的引用。該字段存儲相關模型的ID。如果需要關聯文檔的實際內容,可以在查詢中使用populate()
方法,將id替換為實際數據。例如,以下綱要定義作者和故事。每個作者可以有多個故事,我們將其表示為一個
+ObjectId
數組。每個故事可以有一個作者。綱要從“ref”(以粗體突出顯示)得知,可以分配給該字段的模型。例如,以下綱要定義作者和故事。每個作者可以有多個故事,我們將其表示為一個
ObjectId
數組。每個故事可以有一個作者。綱要從“ref”(以粗體突出顯示)得知,可以分配給該字段的模型。var mongoose = require('mongoose') , Schema = mongoose.Schema @@ -459,9 +459,9 @@
注意:敏銳的讀者會注意到,我們在故事中添加了作者,但我們沒有做任何事情,來將我們的故事添加到作者的故事
stories
數組中。那麼我們怎樣才能得到特定作者的所有故事? +注意:敏銳的讀者會注意到,我們在故事中添加了作者,但我們沒有做任何事情,來將我們的故事添加到作者的故事
-stories
數組中。那麼我們怎樣才能得到特定作者的所有故事?一種方法,是將作者添加到故事數組中,但這會導致我們需要在兩個地方,維護與作者和故事有關的訊息。更好的方法是獲取作者的
+_id
,然後使用find()
,在所有故事的作者字段中搜索此內容。一種方法,是將作者添加到故事數組中,但這會導致我們需要在兩個地方,維護與作者和故事有關的訊息。更好的方法是獲取作者的
_id
,然後使用find()
,在所有故事的作者字段中搜索此內容。-Story .find({ author : bob._id }) @@ -504,17 +504,17 @@
一個檔案對應一個綱要/模
架設MongoDB數據庫
-現在我們了解了Mongoose能做什麼,以及我們想如何設計我們的模型,現在該開始在LocalLibrary網站上工作了。我們想要做的第一件事,就是設置一個MongoDb數據庫,我們可以使用它來儲存我們的圖書館數據。
+現在我們了解了Mongoose能做什麼,以及我們想如何設計我們的模型,現在該開始在LocalLibrary網站上工作了。我們想要做的第一件事,就是設置一個MongoDb數據庫,我們可以使用它來儲存我們的圖書館數據。
-本教程,我們將使用mLab免費的雲託管的“ 沙盒 ”數據庫。這個數據庫層不適合生產環境的網站,因為它沒有冗餘設計,但它對於開發和原型設計來說非常有用。我們在這裡使用它,是因為它免費且易於設置,並且因為作為數據庫服務供應商來說,mLab是流行的數據庫選擇之一,您可能會合理選擇您的生產環境數據庫(撰寫本文時,其他流行的選擇包括Compose、ScaleGrid和MongoDB Atlas)。
+本教程,我們將使用mLab免費的雲託管的“ 沙盒 ”數據庫。這個數據庫層不適合生產環境的網站,因為它沒有冗餘設計,但它對於開發和原型設計來說非常有用。我們在這裡使用它,是因為它免費且易於設置,並且因為作為數據庫服務供應商來說,mLab是流行的數據庫選擇之一,您可能會合理選擇您的生產環境數據庫(撰寫本文時,其他流行的選擇包括Compose、ScaleGrid和MongoDB Atlas)。
-注意:如果您願意,可以下載並安裝與系統相對應的二進製文件,在本地設置MongoDb數據庫。除了您在連接時指定的數據庫URL之外,本文中的其餘指令將很類似。
您首先需要使用mLab創建一個賬戶(這是免費的,只需要輸入基本聯繫訊息,並確認其服務條款)。
+您首先需要使用mLab創建一個賬戶(這是免費的,只需要輸入基本聯繫訊息,並確認其服務條款)。
-登錄後,您將進入mLab主畫面:
+登錄後,您將進入mLab主畫面:
- 單擊MongoDB Deployments部分中的Create New。
@@ -570,14 +570,14 @@架設MongoDB數據庫
安裝 Mongoose
-打開命令提示符,並到您創建本地圖書館骨架網站的目錄。輸入以下命令,安裝Mongoose(及其依賴項),並將其添加到您的package.json文件中,除非您在閱讀上述Mongoose入門時,已經這樣做了。
+打開命令提示符,並到您創建本地圖書館骨架網站的目錄。輸入以下命令,安裝Mongoose(及其依賴項),並將其添加到您的package.json文件中,除非您在閱讀上述Mongoose入門時,已經這樣做了。
npm install mongoose連接到 MongoDB
-打開/app.js(位於項目的根目錄),並在宣告Express應用程序對象的位置(在
+var app = express();
之後)複製以下文本。將數據庫url字符串('insert_your_database_url_here')替換為表示您自己的數據庫的位置URL(即是使用來自上面mLab的訊息)。打開/app.js(位於項目的根目錄),並在宣告Express應用程序對象的位置(在
var app = express();
之後)複製以下文本。將數據庫url字符串('insert_your_database_url_here')替換為表示您自己的數據庫的位置URL(即是使用來自上面mLab的訊息)。//Set up mongoose connection var mongoose = require('mongoose'); @@ -591,7 +591,7 @@定義本地圖書館綱要
-如上所述,我們將為每個模型定義一個單獨的模塊。首先在項目根目錄(/models)中,為我們的模型創建一個文件夾,然後為每個模型創建單獨的文件:
+如上所述,我們將為每個模型定義一個單獨的模塊。首先在項目根目錄(/models)中,為我們的模型創建一個文件夾,然後為每個模型創建單獨的文件:
/express-locallibrary-tutorial //the project root /models @@ -647,7 +647,7 @@作者模型
書本模型
-複製下面顯示的
+Book
綱要代碼,並將其粘貼到./models/book.js文件中。其中大部分與作者模型相似—我們已經聲明了一個具有多個字符串字段的綱要,以及一個虛擬屬性,用於獲取特定書籍記錄的URL,並且我們已經導出了模型。複製下面顯示的
Book
綱要代碼,並將其粘貼到./models/book.js文件中。其中大部分與作者模型相似—我們已經聲明了一個具有多個字符串字段的綱要,以及一個虛擬屬性,用於獲取特定書籍記錄的URL,並且我們已經導出了模型。var mongoose = require('mongoose'); @@ -674,7 +674,7 @@-
這裡的主要區別,是我們已經創建了兩個對其他模型的引用:
+這裡的主要區別,是我們已經創建了兩個對其他模型的引用:
- 作者是對單個
@@ -708,20 +708,20 @@Author
作者模型對象的引用,並且是必要的。書本實例模型
//Export model module.exports = mongoose.model('BookInstance', BookInstanceSchema);我們在這裡展示的新東西,是字段選項:
+我們在這裡展示的新東西,是字段選項:
-
- 枚舉
enum
:這允許我們設置字符串的允許值。在這種情況下,我們用它來指定我們書籍的可用性狀態(使用枚舉,意味著我們可以防止錯誤拼寫和任意值,成為我們的狀態)- 默認值
default
:我們使用默認值,將新創 建的書本實例的默認狀態,設置為維護,並將默認的due_back
日期,設置為現在now
(請注意在設置日期時,如何調用Date函數!)其他所有內容,大夥應該在前面教程裡邊已經熟悉了。
+其他所有內容,大夥應該在前面教程裡邊已經熟悉了。
種類模型-自我挑戰!
-打開你的./models/genre.js文件,並創建一個存儲類型的綱要(書本的類別,例如它是小說還是非小說,浪漫史或軍事歷史等)。
+打開你的./models/genre.js文件,並創建一個存儲類型的綱要(書本的類別,例如它是小說還是非小說,浪漫史或軍事歷史等)。
-該定義將與其他模型非常相似:
+該定義將與其他模型非常相似:
- 該模型應該有一個名為
@@ -732,9 +732,9 @@name
的String
SchemaType ,來描述種類。種類模型-自我挑戰!
測試—創建一些項目
-就是這樣。我們現在已經為該網站建立了所有模型!
+就是這樣。我們現在已經為該網站建立了所有模型!
-為了測試這些模型(並創建一些示例書籍,和其他項目以便於我們在後面文章使用),現在我們將運行一個獨立的腳本來創建每種類型的項目:
+為了測試這些模型(並創建一些示例書籍,和其他項目以便於我們在後面文章使用),現在我們將運行一個獨立的腳本來創建每種類型的項目:
- 在express-locallibrary-tutorial目錄下(與
package.json
處於同一級別),下載(或以其他方式創建)文件populatedb.js。 @@ -758,9 +758,9 @@測試—創建一些項目
總結
-本文中我們學到了一點數據庫和Node/Express的ORMs,更多的是關於如何定義Mongoose綱要與模型。然後我們使用這些知識,為本地圖書館網站設計並實作出書本
+Book
,書本實例BookInstance
,作者Author
和種類Genre
模型。本文中我們學到了一點數據庫和Node/Express的ORMs,更多的是關於如何定義Mongoose綱要與模型。然後我們使用這些知識,為本地圖書館網站設計並實作出書本
-Book
,書本實例BookInstance
,作者Author
和種類Genre
模型。最後,我們創建一些實例,以測試模型(使用獨立運作的命令稿)。下一篇文章,我們將關注於如何創建一些網頁,以呈現這些物件。
+最後,我們創建一些實例,以測試模型(使用獨立運作的命令稿)。下一篇文章,我們將關注於如何創建一些網頁,以呈現這些物件。
參閱
diff --git a/files/zh-tw/learn/server-side/express_nodejs/routes/index.html b/files/zh-tw/learn/server-side/express_nodejs/routes/index.html index 2507e307e3f942..057074713df149 100644 --- a/files/zh-tw/learn/server-side/express_nodejs/routes/index.html +++ b/files/zh-tw/learn/server-side/express_nodejs/routes/index.html @@ -24,11 +24,11 @@概覽
-在上一篇教程文章中,我們定義了Mongoose模型,以與數據庫互動,並使用(獨立)腳本創建一些初始庫記錄。現在我們可以編寫代碼,向用戶展示這些信息。我們需要做的第一件事,是確定我們希望能夠在頁面中顯示哪些信息,然後定義適當的URL,以返回這些資源。然後我們將需要創建路由(URL處理程序)和視圖(模板)來顯示這些頁面。
+在上一篇教程文章中,我們定義了Mongoose模型,以與數據庫互動,並使用(獨立)腳本創建一些初始庫記錄。現在我們可以編寫代碼,向用戶展示這些信息。我們需要做的第一件事,是確定我們希望能夠在頁面中顯示哪些信息,然後定義適當的URL,以返回這些資源。然後我們將需要創建路由(URL處理程序)和視圖(模板)來顯示這些頁面。
-下圖是作為處理HTTP請求/響應時,需要實現的主要數據流和事項的提醒。除了視圖和路線之外,圖表還顯示“控制器” — 實際處理請求的函數,那些與路由請求分開的代碼。
+下圖是作為處理HTTP請求/響應時,需要實現的主要數據流和事項的提醒。除了視圖和路線之外,圖表還顯示“控制器” — 實際處理請求的函數,那些與路由請求分開的代碼。
-由於我們已經創建了模型,我們需要創建的主要內容是:
+由於我們已經創建了模型,我們需要創建的主要內容是:
- “路由”將支持的請求(以及請求URL中編碼的任何信息)轉發到適當的控制器功能。
@@ -40,15 +40,15 @@概覽
-最終,我們可能會有頁面顯示書籍,流派,作者和書籍的列表和詳細信息,以及用於創建,更新和刪除記錄的頁面。對一篇文章來說,這是很多的內容。因此,本文的大部分內容,都將集中在設置我們的路由和控制器,以返回“虛擬”內容。我們將在後續文章中,擴展控制器方法,以使用模型數據。
+最終,我們可能會有頁面顯示書籍,流派,作者和書籍的列表和詳細信息,以及用於創建,更新和刪除記錄的頁面。對一篇文章來說,這是很多的內容。因此,本文的大部分內容,都將集中在設置我們的路由和控制器,以返回“虛擬”內容。我們將在後續文章中,擴展控制器方法,以使用模型數據。
-下面的第一部分,提供了關於如何使用Express Router中間件的簡要“入門”。當我們設置LocalLibrary路由時,我們將在後面的章節中使用這些知識。
+下面的第一部分,提供了關於如何使用Express Router中間件的簡要“入門”。當我們設置LocalLibrary路由時,我們將在後面的章節中使用這些知識。
路由入門
-路由是Express代碼的一部分,它將HTTP動詞(
+GET
,POST
,PUT
,DELETE
等),URL路徑/模式和被調用來處理該模式的函數,相關聯起來。路由是Express代碼的一部分,它將HTTP動詞(
-GET
,POST
,PUT
,DELETE
等),URL路徑/模式和被調用來處理該模式的函數,相關聯起來。有幾種方法可以創建路線。本教程將使用
+express.Router
中間件,因為它允許我們將站點的特定部分的路由處理程序組合在一起,並使用通用的路由前綴訪問它們。我們會將所有與圖書館有關的路由,保存在“目錄”模塊中,如果我們添加路由來處理用戶帳戶或其他功能,我們可以將它們分開保存。有幾種方法可以創建路線。本教程將使用
express.Router
中間件,因為它允許我們將站點的特定部分的路由處理程序組合在一起,並使用通用的路由前綴訪問它們。我們會將所有與圖書館有關的路由,保存在“目錄”模塊中,如果我們添加路由來處理用戶帳戶或其他功能,我們可以將它們分開保存。注意:我們在Express簡介>創建路由處理程序中,簡要討論了Express應用程序路由。除了為模塊化提供更好的支持之外(如下面第一小節所述),使用Router非常類似於直接在Express應用程序對像上定義路由。
@@ -58,9 +58,9 @@下面的代碼提供了一個具體示例,說明我們如何創建路由模塊,然後在Express應用程序中使用它。首先,我們在一個名為wiki.js的模塊中創建一個wiki的路由。代碼首先導入Express應用程序對象,使用它獲取一個 +
下面的代碼提供了一個具體示例,說明我們如何創建路由模塊,然後在Express應用程序中使用它。首先,我們在一個名為wiki.js的模塊中創建一個wiki的路由。代碼首先導入Express應用程序對象,使用它獲取一個
-+
Router
對象,然後使用get()
方法向其添加一對路由。所有模塊的最後一個導出路由器Router
對象。
Router
對象,然後使用get()
方法向其添加一對路由。所有模塊的最後一個導出路由器Router
對象。// wiki.js - Wiki route module. @@ -105,9 +105,9 @@
路由函數
回調函數接受三個參數(通常如下所示命名:
req
,res
,next
),它將包含HTTP請求對象,HTTP響應,以及中間件鏈中的下一個函數。-@@ -116,9 +116,9 @@注意:路由器功能是Express中間件,這意味著它們必須完成(響應)請求或調用鏈中的下一個功能
+next
。在上面的例子中,我們使用send()
完成了請求,所以下一個參數next
沒有被使用(我們選擇不指定它)。注意:路由器功能是Express中間件,這意味著它們必須完成(響應)請求或調用鏈中的下一個功能
-next
。在上面的例子中,我們使用send()
完成了請求,所以下一個參數next
沒有被使用(我們選擇不指定它)。上面的路由器函數只需要一次回調,但您可以根據需要指定任意數量的回調參數,或一組回調函數。每個函數都是中間件鏈的一部分,並且將按照添加到鏈中的順序調用(除非前面的函數完成請求)。
+上面的路由器函數只需要一次回調,但您可以根據需要指定任意數量的回調參數,或一組回調函數。每個函數都是中間件鏈的一部分,並且將按照添加到鏈中的順序調用(除非前面的函數完成請求)。
路由函數
HTTP 動詞
-上面的示例路由使用
+Router.get()
方法,響應具有特定路徑的HTTP GET請求。路由器Router
還為所有其他HTTP動詞提供路由方法,這些方法多數以完全相同的方式使用:post()
,put()
,delete()
,options()
,trace()
,copy()
,lock()
,mkcol()
,move()
,purge()
,propfind()
,proppatch()
,unlock()
,report()
,mkactivity()
,checkout()
,merge()
,m-
search()
,notify()
,subscribe()
,unsubscribe()
,patch()
,search()
,和connect()
。上面的示例路由使用
-Router.get()
方法,響應具有特定路徑的HTTP GET請求。路由器Router
還為所有其他HTTP動詞提供路由方法,這些方法多數以完全相同的方式使用:post()
,put()
,delete()
,options()
,trace()
,copy()
,lock()
,mkcol()
,move()
,purge()
,propfind()
,proppatch()
,unlock()
,report()
,mkactivity()
,checkout()
,merge()
,m-
search()
,notify()
,subscribe()
,unsubscribe()
,patch()
,search()
,和connect()
。例如,下面的代碼就像上一個
+/about
路由一樣,但只響應HTTP POST請求。例如,下面的代碼就像上一個
/about
路由一樣,但只響應HTTP POST請求。router.post('/about', function (req, res) { res.send('About this wiki'); @@ -126,9 +126,9 @@
HTTP 動詞
路由路徑
-路由路徑定義可以進行請求的端點。我們到目前為止看到的例子,都是字符串,並且完全按照字符串的寫法使用:'/','/ about','/ book','/any-random.path'。
+路由路徑定義可以進行請求的端點。我們到目前為止看到的例子,都是字符串,並且完全按照字符串的寫法使用:'/','/ about','/ book','/any-random.path'。
-路由路徑也可以是字符串模式。字符串模式使用正則表達式語法的子集,來定義將匹配的端點模式。下面列出了子集(請注意,連字符(
+-
)和點(.
)由字符串路徑字面解釋):路由路徑也可以是字符串模式。字符串模式使用正則表達式語法的子集,來定義將匹配的端點模式。下面列出了子集(請注意,連字符(
-
)和點(.
)由字符串路徑字面解釋):-
- ? :端點在?號前面的那個字符,必須為0個或1個。例如。
@@ -137,7 +137,7 @@'/ab?cd'
的路徑路徑將匹配端點acd
或abcd
。路由路徑
- () :將一組字符進行匹配,以執行上面三個操作。例如。
'/ab(cd)?e'
,表示以?號對(cd)進行匹配-它會匹配abe
和abcde
。(譯註:即(cd)必須為0個或1個。若為0,匹配abe
。若為1,匹配abcde
)路由路徑也可以是JavaScript正則表達式。例如,下面的路由路徑將與鯰魚
+catfish
和角鯊魚dogfish
相匹配,但不包括鯰魚catflap
、鯰魚頭catfishhead
等。請注意,正則表達式的路徑使用正則表達式語法(它不像以前那樣,是帶引號的字符串)。路由路徑也可以是JavaScript正則表達式。例如,下面的路由路徑將與鯰魚
catfish
和角鯊魚dogfish
相匹配,但不包括鯰魚catflap
、鯰魚頭catfishhead
等。請注意,正則表達式的路徑使用正則表達式語法(它不像以前那樣,是帶引號的字符串)。app.get(/.*fish$/, function (req, res) { ... @@ -149,9 +149,9 @@
路由路徑
路由參數
-路徑參數是命名的URL段,用於捕獲在URL中的位置指定的值。命名段以冒號為前綴,然後是名稱(例如。捕獲的值,使用參數名稱作為鍵,存在對像中(例如)。
+/:your_parameter_name/
req.params
req.params.your_parameter_name
路徑參數是命名的URL段,用於捕獲在URL中的位置指定的值。命名段以冒號為前綴,然後是名稱(例如。捕獲的值,使用參數名稱作為鍵,存在對像中(例如)。
-/:your_parameter_name/
req.params
req.params.your_parameter_name
例如,考慮一個編碼的URL,其中包含有關用戶和書本的信息:
+http://localhost:3000/users/34/books/8989
。我們可以使用userId
和bookId
路徑參數,提取如下所示的信息:例如,考慮一個編碼的URL,其中包含有關用戶和書本的信息:
http://localhost:3000/users/34/books/8989
。我們可以使用userId
和bookId
路徑參數,提取如下所示的信息:app.get('/users/:userId/books/:bookId', function (req, res) { // Access userId via: req.params.userId @@ -170,7 +170,7 @@
路由參數
本地圖書館需要的路由
-下面列出了我們最終需要用於頁面的URL,其中object被替換為每個模型的名稱(book,bookinstance,genre,author),objects是對象的複數,id是默認情況下,為每個Mongoose模型實例指定的唯一實例字段(
+_id
)。下面列出了我們最終需要用於頁面的URL,其中object被替換為每個模型的名稱(book,bookinstance,genre,author),objects是對象的複數,id是默認情況下,為每個Mongoose模型實例指定的唯一實例字段(
_id
)。-
- @@ -181,9 +181,9 @@
catalog/
— 主頁/索引頁面。本地圖書館需要的路由
catalog/<object>/<id>/delete
—刪除具有給定_id
字段值的特定書本,書本實例,種類或作者的表單(例如/catalog/book/584493c1f4887f06c0e67d37/delete
)。第一個主頁和列表頁面,不編碼任何其他信息。雖然返回的結果,將取決於模型類型和數據庫中的內容,但為了獲取信息所運行的查詢,將始終相同(類似地,用於創建對象的代碼將始終類似)。相反的,其他URL用於處理特定文檔/模型實例—這些將項目的標識編碼在URL中(如上面的
+<id>
)。第一個主頁和列表頁面,不編碼任何其他信息。雖然返回的結果,將取決於模型類型和數據庫中的內容,但為了獲取信息所運行的查詢,將始終相同(類似地,用於創建對象的代碼將始終類似)。相反的,其他URL用於處理特定文檔/模型實例—這些將項目的標識編碼在URL中(如上面的
-<id>
)。我們將使用路徑參數,來提取編碼信息,並將其傳遞給路由處理程序(在稍後的文章中,我們將使用它來動態確定從數據庫獲取的信息)。通過對我們的URL中的信息進行編碼,我們只需要一個路由,用於特定類型的每個資源(例如,一個路由來處理每個書本項目的顯示)。
+我們將使用路徑參數,來提取編碼信息,並將其傳遞給路由處理程序(在稍後的文章中,我們將使用它來動態確定從數據庫獲取的信息)。通過對我們的URL中的信息進行編碼,我們只需要一個路由,用於特定類型的每個資源(例如,一個路由來處理每個書本項目的顯示)。
注意 : Express允許您以任何方式構建URL -您可以在URL正文中編碼信息,就像上面一樣,或使用URL
@@ -193,9 +193,9 @@GET
參數(例如/book/?id=6
)。無論您使用哪種方法,URL都應保持乾淨,合理且可讀(請在此處查看W3C建議)。本地圖書館需要的路由
創建路由-handler回調函式
-在我們定義路由之前,我們將首先創建它們將調用的所有虛擬/骨架回調函數。回調將存在Books,BookInstances,Genres 和Authors 的單獨“控制器” 模塊中(您可以使用任何文件/模塊結構,但這似乎是該項目的適當粒度)。
+在我們定義路由之前,我們將首先創建它們將調用的所有虛擬/骨架回調函數。回調將存在Books,BookInstances,Genres 和Authors 的單獨“控制器” 模塊中(您可以使用任何文件/模塊結構,但這似乎是該項目的適當粒度)。
-首先在項目根目錄(/controllers)中,為我們的控制器創建一個文件夾,然後創建單獨的控制器文件/模塊,來處理每個模型:
+首先在項目根目錄(/controllers)中,為我們的控制器創建一個文件夾,然後創建單獨的控制器文件/模塊,來處理每個模型:
/express-locallibrary-tutorial //the project root /controllers @@ -206,7 +206,7 @@創建路由-handler回調函式
作者控制器
-打開/controllers/authorController.js文件,並複制以下代碼:
+打開/controllers/authorController.js文件,並複制以下代碼:
var Author = require('../models/author'); @@ -251,13 +251,13 @@-作者控制器
};該模塊首先導入我們稍後將使用的模型,來訪問和更新我們的數據。然後它為我們希望處理的每個URL,導出函數(創建,更新和刪除操作使用表單,因此還有其他方法,來處理表單發布請求- 我們將在稍後的“表單文章” 中討論這些方法) 。
+該模塊首先導入我們稍後將使用的模型,來訪問和更新我們的數據。然後它為我們希望處理的每個URL,導出函數(創建,更新和刪除操作使用表單,因此還有其他方法,來處理表單發布請求- 我們將在稍後的“表單文章” 中討論這些方法) 。
-所有函數都具有Express中間件函數的標準形式,如果方法沒有完成請求週期,則會調用請求,響應和
+next
下一個函數的參數(在所有這些情況下,它都會執行!)。這些方法只返回一個字符串,表明尚未創建關聯的頁面。如果期望控制器函數接收路徑參數,則在消息字符串中,輸出這些參數(參見上面的req.params.id
)。所有函數都具有Express中間件函數的標準形式,如果方法沒有完成請求週期,則會調用請求,響應和
next
下一個函數的參數(在所有這些情況下,它都會執行!)。這些方法只返回一個字符串,表明尚未創建關聯的頁面。如果期望控制器函數接收路徑參數,則在消息字符串中,輸出這些參數(參見上面的req.params.id
)。書本實例控制器
-打開/controllers/bookinstanceController.js文件,並將其複製到以下代碼中(它遵循與
+Author
控制器模塊相同的模式):打開/controllers/bookinstanceController.js文件,並將其複製到以下代碼中(它遵循與
Author
控制器模塊相同的模式):var BookInstance = require('../models/bookinstance'); @@ -304,7 +304,7 @@種類控制器
-打開/controllers/genreController.js文件,並複制以下文本(這與
+Author
和BookInstance
文件的模式相同):打開/controllers/genreController.js文件,並複制以下文本(這與
Author
和BookInstance
文件的模式相同):var Genre = require('../models/genre'); @@ -351,7 +351,7 @@書本控制器
-打開/controllers/bookController.js文件,並複制以下代碼。它遵循與其他控制器模塊相同的模式,但另外還有一個
+index()
函數,用於顯示站點歡迎頁面:打開/controllers/bookController.js文件,並複制以下代碼。它遵循與其他控制器模塊相同的模式,但另外還有一個
index()
函數,用於顯示站點歡迎頁面:var Book = require('../models/book'); @@ -402,9 +402,9 @@接下來,我們為LocalLibrary 網站,創建所需全部URL 的路由,這將調用我們在上一節中定義的控制器功能。 +
接下來,我們為LocalLibrary 網站,創建所需全部URL 的路由,這將調用我們在上一節中定義的控制器功能。
-骨架網站已經有一個./routes文件夾,其中包含索引和用戶的路由。在此文件夾中,創建另一個路徑文件— catalog.js —如下圖所示。
+骨架網站已經有一個./routes文件夾,其中包含索引和用戶的路由。在此文件夾中,創建另一個路徑文件— catalog.js —如下圖所示。
/express-locallibrary-tutorial //the project root /routes @@ -533,17 +533,17 @@-創建目錄路由模組
module.exports = router;該模塊導入Express,然後使用它來創建一個
+Router
對象。路由都在路由器上設置完成,然後導出。該模塊導入Express,然後使用它來創建一個
-Router
對象。路由都在路由器上設置完成,然後導出。路由是使用路由器對像上的
+.get()
或.post()
方法定義的。所有路徑都是使用字符串定義的(我們不使用字符串模式或正則表達式)。作用於某些特定資源(如書籍)的路由,則使用路徑參數從URL中獲取對象標識id。路由是使用路由器對像上的
-.get()
或.post()
方法定義的。所有路徑都是使用字符串定義的(我們不使用字符串模式或正則表達式)。作用於某些特定資源(如書籍)的路由,則使用路徑參數從URL中獲取對象標識id。處理程序函數,都是從我們在上一節中,創建的控制器模塊導入的。
+處理程序函數,都是從我們在上一節中,創建的控制器模塊導入的。
更新 index 路由模組
-我們已經設置了所有新路由,但我們仍然有一個到原始頁面的路由。讓我們將其重定向,到我們在路徑'/ catalog' 創建的新索引頁面。
+我們已經設置了所有新路由,但我們仍然有一個到原始頁面的路由。讓我們將其重定向,到我們在路徑'/ catalog' 創建的新索引頁面。
-打開/routes/index.js並使用下面的函數,替換現有路由。
+打開/routes/index.js並使用下面的函數,替換現有路由。
// GET home page. router.get('/', function(req, res) { @@ -556,9 +556,9 @@更新 index 路由模組
更新app.js
-最後一步,是將路由,添加到中間件鏈。我們在
+app.js
這樣做。最後一步,是將路由,添加到中間件鏈。我們在
-app.js
這樣做。打開app.js,並要求其他路由下方的目錄路由(添加下面顯示的第三行,在其他兩個路由下面):
+打開app.js,並要求其他路由下方的目錄路由(添加下面顯示的第三行,在其他兩個路由下面):
var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); @@ -614,9 +614,9 @@測試路由
總結
-我們現在為網站創建了所有的路由,在稍後的教程,我們可以將實作完成的代碼,填入到空殼控制器函式。以這樣的方式,我們學到了許多關於Express 路由的基本信息,以及一些組織路由和控制器的方式。
+我們現在為網站創建了所有的路由,在稍後的教程,我們可以將實作完成的代碼,填入到空殼控制器函式。以這樣的方式,我們學到了許多關於Express 路由的基本信息,以及一些組織路由和控制器的方式。
-下一篇文章,我們將使用視圖(模板) 和存在模型裡的信息,為網站創建一個合適的歡迎頁面。
+下一篇文章,我們將使用視圖(模板) 和存在模型裡的信息,為網站創建一個合適的歡迎頁面。
參閱
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/zh-tw/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html index c2d1b69037ceb8..7945e6b50b54b8 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ b/files/zh-tw/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -46,7 +46,7 @@Specifying background
然而,你也可以先載入一個後台頁面,然後在後台頁面中載入腳本。這樣的做法能為後台腳本提供 ES 6 模組的支援,算是一个優點。
-manifest.json
+manifest.json
-// manifest.json @@ -54,7 +54,7 @@
Specifying background "page": "background-page.html" }
background-page.html
+background-page.html
-<!DOCTYPE html> <html lang="zh-tw"> diff --git a/files/zh-tw/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html b/files/zh-tw/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html index 744cc6ed8bd409..5a233888edb793 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html +++ b/files/zh-tw/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html @@ -108,7 +108,7 @@
Chrome 示例
console.log(items.kitten); // -> {name:"Mog", eats:"mice"} });Or with an arrow function
+Or with an arrow function
chrome.storage.local.get("kitten", items=>{ console.log(items.kitten); // -> {name:"Mog", eats:"mice"} diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html index 5c8e40bcdd6c8b..6ddbc4bb71b107 100644 --- a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html +++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html @@ -53,7 +53,7 @@diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html index dde37502e7890d..14deda8b76885b 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html @@ -14,26 +14,26 @@ 側邊欄 - 一個顯示在網頁旁邊的HTML文件,每頁可以顯示獨立的內容。側邊欄會在用戶安裝套件時打開,然後根據用戶對側邊欄的可視選項開關。側邊欄裡的用戶互動由它的HTML文件來控制。
+一個顯示在網頁旁邊的HTML文件,每頁可以顯示獨立的內容。側邊欄會在用戶安裝套件時打開,然後根據用戶對側邊欄的可視選項開關。側邊欄裡的用戶互動由它的HTML文件來控制。
<canvas>
元素<canvas id="tutorial" width="150" height="150"></canvas>-首先,先來看看 {{HTMLElement("canvas")}},它看起來有點像 {{HTMLElement("img")}} 元素,其中的差異點在於
+<canvas>
沒有src
和alt
屬性,<canvas>
只有 {{htmlattrxref("width", "canvas")}} 與 {{htmlattrxref("height", "canvas")}} 這兩個屬性,這兩個屬性皆為非必須、能透過 DOM屬性設定;若是沒有設定width
和height
屬性,畫布寬預設值為 300 pixels、高預設值為 150 pixels,我們可以用 CSS 強制設定元素尺寸,但當渲染時,影像會縮放以符合元素的尺寸。首先,先來看看 {{HTMLElement("canvas")}},它看起來有點像 {{HTMLElement("img")}} 元素,其中的差異點在於
<canvas>
沒有src
和alt
屬性,<canvas>
只有 {{htmlattrxref("width", "canvas")}} 與 {{htmlattrxref("height", "canvas")}} 這兩個屬性,這兩個屬性皆為非必須、能透過 DOM屬性設定;若是沒有設定width
和height
屬性,畫布寬預設值為 300 pixels、高預設值為 150 pixels,我們可以用 CSS 強制設定元素尺寸,但當渲染時,影像會縮放以符合元素的尺寸。--Note:如果繪圖結果看起來有些扭曲,可以改試著用<canvas>自身的width和height屬性而不要用CSS來設定寬高。
+Note:如果繪圖結果看起來有些扭曲,可以改試著用<canvas>自身的width和height屬性而不要用CSS來設定寬高。
幾乎所有HTML元素都有id屬性,<canvas>也不例外,為了方便於程式碼腳本找到需要的<canvas>,每次都設定id是一項不錯的作法。
+幾乎所有HTML元素都有id屬性,<canvas>也不例外,為了方便於程式碼腳本找到需要的<canvas>,每次都設定id是一項不錯的作法。
-如同一般的影像可以設定如邊界(margin)、邊框(border)、背景(background)等等,<canvas>元素一樣可以設定這些樣式,然而,這些樣式規則不會影響canvas實際繪圖,稍後我們會看到相關範例。當沒有套用樣式規定時,<canvas>會被初始成全透明。
+如同一般的影像可以設定如邊界(margin)、邊框(border)、背景(background)等等,<canvas>元素一樣可以設定這些樣式,然而,這些樣式規則不會影響canvas實際繪圖,稍後我們會看到相關範例。當沒有套用樣式規定時,<canvas>會被初始成全透明。
-+
錯誤替代內容(Fallback content)
-因為舊版瀏覽器(特別是IE9之前的IE)不支援{<canvas>}元素,我們應該為這些瀏覽器準備錯誤替代內容。
+因為舊版瀏覽器(特別是IE9之前的IE)不支援{<canvas>}元素,我們應該為這些瀏覽器準備錯誤替代內容。
-當不支援<canvas>的瀏覽器看到不認識的<canvas>時會忽略<canvas>,而此時在<canvas>下瀏覽器認識的替代內容則會被瀏覽器解析顯示,至於支援<canvas>的瀏覽器則是會正常解析<canvas>,忽略替代內容。
+當不支援<canvas>的瀏覽器看到不認識的<canvas>時會忽略<canvas>,而此時在<canvas>下瀏覽器認識的替代內容則會被瀏覽器解析顯示,至於支援<canvas>的瀏覽器則是會正常解析<canvas>,忽略替代內容。
-例如,我們可以準備一段canvas內容的說明文字或canvas繪圖完成後的靜態圖片,如下所示:
+例如,我們可以準備一段canvas內容的說明文字或canvas繪圖完成後的靜態圖片,如下所示:
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 @@ -48,36 +48,36 @@
需要</canvas>標籤
-不像{{HTMLElement("img")}}元素,{{HTMLElement("canvas")}}元素必須要有</canvas>結束標籤。
+不像{{HTMLElement("img")}}元素,{{HTMLElement("canvas")}}元素必須要有</canvas>結束標籤。
-+
--縱使早期Apple的Safari瀏覽器不需要結束標籤,但是基於規範,這是必須的,所以,為了相容性考量,應該要有結束標籤。Safari 2.0以前的版本會同時解析canvas以及替代內容,除非我們用CSS去遮蓋內容,不過幸運的是,現在已經沒有甚麼人在用這些舊版Safari。
+縱使早期Apple的Safari瀏覽器不需要結束標籤,但是基於規範,這是必須的,所以,為了相容性考量,應該要有結束標籤。Safari 2.0以前的版本會同時解析canvas以及替代內容,除非我們用CSS去遮蓋內容,不過幸運的是,現在已經沒有甚麼人在用這些舊版Safari。
如果不需要錯誤替代內容,簡單的<canvas id="foo" ...></canvas>便可以完全相容於所有支援的瀏覽器。
+如果不需要錯誤替代內容,簡單的<canvas id="foo" ...></canvas>便可以完全相容於所有支援的瀏覽器。
-+
渲染環境(rendering context)
-{{HTMLElement("canvas")}}產生一個固定大小的繪圖畫布,這個畫布上有一或多個渲染環境(rendering context),我們可以用渲染環境來產生或操作顯示內容的渲染環境(rendering context)。不同環境(context)可能會提供不同型態的渲染方式,好比說WebGL使用OpenGL ES的3D環境(context),而這裡我們主要將討論2D渲染環境(rendering context)。
+{{HTMLElement("canvas")}}產生一個固定大小的繪圖畫布,這個畫布上有一或多個渲染環境(rendering context),我們可以用渲染環境來產生或操作顯示內容的渲染環境(rendering context)。不同環境(context)可能會提供不同型態的渲染方式,好比說WebGL使用OpenGL ES的3D環境(context),而這裡我們主要將討論2D渲染環境(rendering context)。
-一開始canvas為空白,程式碼腳本需要先存取渲染環境,在上面繪圖,然後才會顯現影像。{{HTMLElement("canvas")}} 素有一個方法(method)叫getContext(),透過此方法可以取得渲染環境及其繪圖函數(function);getContext()輸入參數只有渲染環境類型一項,像本教學所討論的2D繪圖,就是輸入”2d”。
+一開始canvas為空白,程式碼腳本需要先存取渲染環境,在上面繪圖,然後才會顯現影像。{{HTMLElement("canvas")}} 素有一個方法(method)叫getContext(),透過此方法可以取得渲染環境及其繪圖函數(function);getContext()輸入參數只有渲染環境類型一項,像本教學所討論的2D繪圖,就是輸入”2d”。
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');-上面第一行先呼叫{{domxref("document.getElementById()")}}來取得{{HTMLElement("canvas")}}元素,一旦取得元素後,便可以用其getContext()取得渲染環境。
+上面第一行先呼叫{{domxref("document.getElementById()")}}來取得{{HTMLElement("canvas")}}元素,一旦取得元素後,便可以用其getContext()取得渲染環境。
-+
支援性檢查
-替代內容會被不支援{{HTMLElement("canvas")}}.的瀏覽器所顯示。程式碼腳本也可以利用檢查getContext()方法是否存在來檢查是否支援<canvas>,我們可以修改上面例子成如下:
+替代內容會被不支援{{HTMLElement("canvas")}}.的瀏覽器所顯示。程式碼腳本也可以利用檢查getContext()方法是否存在來檢查是否支援<canvas>,我們可以修改上面例子成如下:
var canvas = document.getElementById('tutorial'); @@ -95,7 +95,7 @@
一個範本
-這裡是一個最簡單的範本,之後就是我們範例的起始點。
+這裡是一個最簡單的範本,之後就是我們範例的起始點。
<html> <head> @@ -118,15 +118,15 @@-一個範本
</html>一旦網頁載入完成後,程式碼會呼叫draw()函數(這是利用document上的load事件完成),這類draw()函數也可以透過{{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}或其他事件處理函數來呼叫,只要呼叫的時間點是在網頁載入完後。
+一旦網頁載入完成後,程式碼會呼叫draw()函數(這是利用document上的load事件完成),這類draw()函數也可以透過{{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}或其他事件處理函數來呼叫,只要呼叫的時間點是在網頁載入完後。
-這是我們的範本實際看起來的樣子:
+這是我們的範本實際看起來的樣子:
{{EmbedLiveSample("A_skeleton_template", 160, 160)}}
一個簡單的範例
-首先,讓我們先來畫兩個相交的正方形,其中一個正方形有alpha透明值,之後我們會說明這是如何達成的。
+首先,讓我們先來畫兩個相交的正方形,其中一個正方形有alpha透明值,之後我們會說明這是如何達成的。
<html> <head> @@ -151,7 +151,7 @@-一個簡單的範例
</html>本範例的結果如下:
+本範例的結果如下:
{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html index 5bdaba797c5105..676995dd367eac 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -5,7 +5,7 @@ ---{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}-網格(Grid)
+網格(Grid)
在開始繪圖前,我們必須先了解畫布 (canvas) 網格,或著是說座標空間。在前一頁教學中的 HTML 範本有一個寬150 pixels (像素)、高150 pixels 的畫布。如右圖,你在畫布預設網格上繪圖,網格上 1 單位相當於畫布上 1 pixel,網格的原點 (座標 (0, 0) ) 坐落於左上角,所有元素定位皆相對於此左上角原點,所以藍色方塊的位置為從左往右推 x pixels、從上往下推 y pixels (亦即座標 (x, y) )。現在我們先專注在預設設定上,之後我們會看到如何轉換原點位置、旋轉網格以及縮放網格。
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html index 6dacbc07d1d901..4a33d6d001b829 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html @@ -11,10 +11,10 @@@@ -27,27 +27,27 @@
- -
取得{{domxref("HTMLImageElement")}}物件或其他畫布元素的參照(reference)作為來源,透過單純提供URL或圖片位置的方式是行不通的.
+取得{{domxref("HTMLImageElement")}}物件或其他畫布元素的參照(reference)作為來源,透過單純提供URL或圖片位置的方式是行不通的.
- -
用drawImage()函數在畫布上畫影像.
+用drawImage()函數在畫布上畫影像.
取得影像
- {{domxref("HTMLImageElement")}}
- -
用Image()建構成的影像或是{{HTMLElement("img")}}元素.
+用Image()建構成的影像或是{{HTMLElement("img")}}元素.
- {{domxref("HTMLVideoElement")}}
- -
用{{domxref("HTMLVideoElement")}}元素作影像來源,抓取影片目前的影像畫格當作影像使用.
+用{{domxref("HTMLVideoElement")}}元素作影像來源,抓取影片目前的影像畫格當作影像使用.
- {{domxref("HTMLCanvasElement")}}
- -
用另一個{{domxref("HTMLCanvasElement")}}元素當影像來源.
+用另一個{{domxref("HTMLCanvasElement")}}元素當影像來源.
- {{domxref("ImageBitmap")}}
- -
可以被快速渲染的點陣圖(bitmap),點陣圖能由上述所有來源產生.
+可以被快速渲染的點陣圖(bitmap),點陣圖能由上述所有來源產生.
這些來源統一參照 CanvasImageSource型態.
-有好幾種方法能夠取得影像用於畫布.
+有好幾種方法能夠取得影像用於畫布.
-+
使用同一份網頁上的影像
diff --git a/files/zh-tw/web/api/cssstylesheet/index.html b/files/zh-tw/web/api/cssstylesheet/index.html index 9b3725c7971851..b8f04ab6374aa6 100644 --- a/files/zh-tw/web/api/cssstylesheet/index.html +++ b/files/zh-tw/web/api/cssstylesheet/index.html @@ -22,12 +22,12 @@Properties
Inherits properties from its parent, {{domxref("StyleSheet")}}.
-
@@ -36,9 +36,9 @@- {{domxref("CSSStyleSheet.cssRules")}}
+- {{domxref("CSSStyleSheet.cssRules")}}
- Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.
-
This is normally used to access individual rules like this:
styleSheet.cssRules[i] // where i = 0..cssRules.length-1
To add or remove items incssRules
, use theCSSStyleSheet
'sdeleteRule()
andinsertRule()
methods, described below.- {{domxref("CSSStyleSheet.ownerRule")}}
+- {{domxref("CSSStyleSheet.ownerRule")}}
- If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the
ownerRule
property will return that {{domxref("CSSImportRule")}}, otherwise it returnsnull
.Methods
Inherits methods from its parent, {{domxref("Stylesheet")}}.
-
diff --git a/files/zh-tw/web/api/document/getelementsbyclassname/index.html b/files/zh-tw/web/api/document/getelementsbyclassname/index.html index a8aea17223b72b..0ab1a894ab68df 100644 --- a/files/zh-tw/web/api/document/getelementsbyclassname/index.html +++ b/files/zh-tw/web/api/document/getelementsbyclassname/index.html @@ -5,7 +5,7 @@ - 待翻譯 translation_of: Web/API/Document/getElementsByClassName --- -- {{domxref("CSSStyleSheet.deleteRule()")}}
+- {{domxref("CSSStyleSheet.deleteRule()")}}
- Deletes a rule at the specified position from the style sheet.
-- {{domxref("CSSStyleSheet.insertRule()")}}
+- {{domxref("CSSStyleSheet.insertRule()")}}
- Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.
{{APIRef("DOM")}}
+{{APIRef("DOM")}}
針對所有給定的 class 子元素,回傳類似陣列的物件。當呼叫 document 物件時,它會搜尋整個文件,包括根節點在內。你也可以在所有元素呼叫 {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}},那它就只會回傳含有給定 class 的特定根元素的後代元素。
diff --git a/files/zh-tw/web/api/document/keyup_event/index.html b/files/zh-tw/web/api/document/keyup_event/index.html index 0b45e3337edf38..0dbcdf8193b423 100644 --- a/files/zh-tw/web/api/document/keyup_event/index.html +++ b/files/zh-tw/web/api/document/keyup_event/index.html @@ -8,18 +8,18 @@基本資料
-
- 詳述
-- DOM L3
-- 介面
-- KeyboardEvent
-- Bubbles
-- Yes
-- Cancelable
-- Yes
-- Target
-- 網頁文件, 網頁元素
-- Default Action
-- None
+- 詳述
+- DOM L3
+- 介面
+- KeyboardEvent
+- Bubbles
+- Yes
+- Cancelable
+- Yes
+- Target
+- 網頁文件, 網頁元素
+- Default Action
+- None
屬性
diff --git a/files/zh-tw/web/api/dragevent/index.html b/files/zh-tw/web/api/dragevent/index.html index 7a1ffbd40854a6..4293f24ad7d57c 100644 --- a/files/zh-tw/web/api/dragevent/index.html +++ b/files/zh-tw/web/api/dragevent/index.html @@ -9,7 +9,7 @@ -This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.
+This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.
屬性
@@ -20,7 +20,7 @@屬性
建構式
-Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.
+Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.
- {{domxref("DragEvent.DragEvent", "DragEvent()")}}
diff --git a/files/zh-tw/web/api/element/scrollheight/index.html b/files/zh-tw/web/api/element/scrollheight/index.html index 6ca25c83523d15..b4b1b80909c379 100644 --- a/files/zh-tw/web/api/element/scrollheight/index.html +++ b/files/zh-tw/web/api/element/scrollheight/index.html @@ -25,13 +25,13 @@範例
diff --git a/files/zh-tw/web/api/element/scrolltop/index.html b/files/zh-tw/web/api/element/scrolltop/index.html index 9843f1980222af..6d175c7aa65f69 100644 --- a/files/zh-tw/web/api/element/scrolltop/index.html +++ b/files/zh-tw/web/api/element/scrolltop/index.html @@ -35,13 +35,13 @@-Left Top Right Bottom margin-top margin-bottom border-top border-bottompadding-top
+padding-top
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-padding-bottom
+padding-bottom
範例
diff --git a/files/zh-tw/web/api/element/touchcancel_event/index.html b/files/zh-tw/web/api/element/touchcancel_event/index.html index 4b4069ce2030c2..a2945d6c2d2599 100644 --- a/files/zh-tw/web/api/element/touchcancel_event/index.html +++ b/files/zh-tw/web/api/element/touchcancel_event/index.html @@ -10,18 +10,18 @@-Left Top Right Bottom margin-top margin-bottom border-top border-bottompadding-top
+padding-top
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-padding-bottom
+padding-bottom
一般資訊
-
- 規範
-- Touch Events
-- 介面
-- TouchEvent
-- 起泡事件
-- 是
-- 可取消
-- 否
-- 對象
-- Document, Element
-- 預設行為
-- 無
+- 規範
+- Touch Events
+- 介面
+- TouchEvent
+- 起泡事件
+- 是
+- 可取消
+- 否
+- 對象
+- Document, Element
+- 預設行為
+- 無
屬性
diff --git a/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html index 491cf338284ace..5060840f3c8fad 100644 --- a/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -7,7 +7,7 @@本文會一一說明拖曳各步驟的作業。
-The drag operations described in this document use the {{domxref("DataTransfer")}} interface. This document does not use the {{domxref("DataTransferItem")}} interface nor the {{domxref("DataTransferItemList")}} interface.
+The drag operations described in this document use the {{domxref("DataTransfer")}} interface. This document does not use the {{domxref("DataTransferItem")}} interface nor the {{domxref("DataTransferItemList")}} interface.
Draggable 屬性
diff --git a/files/zh-tw/web/api/html_drag_and_drop_api/index.html b/files/zh-tw/web/api/html_drag_and_drop_api/index.html index dd8b6e436fc4c3..6b4dbea251bea1 100644 --- a/files/zh-tw/web/api/html_drag_and_drop_api/index.html +++ b/files/zh-tw/web/api/html_drag_and_drop_api/index.html @@ -67,7 +67,7 @@拖曳事件
-注意:
+dragstart
與dragend
事件,在把檔案從作業系統拖放到瀏覽器時,並不會觸發。注意:
dragstart
與dragend
事件,在把檔案從作業系統拖放到瀏覽器時,並不會觸發。介面
@@ -81,7 +81,7 @@介面
{{domxref("DataTransfer")}} 與 {{domxref("DataTransferItem")}} 介面的最大不同,就是前者使用同步的 {{domxref("DataTransfer.getData","getData()")}} 方法訪問拖放單元的資料;後者則使用非同步的 {{domxref("DataTransferItem.getAsString","getAsString()")}} 方法訪問。
-注意:{{domxref("DragEvent")}} 與 {{domxref("DataTransfer")}} 介面受廣泛的桌面瀏覽器支援。但只有少數瀏覽器支援 {{domxref("DataTransferItem")}} 與 {{domxref("DataTransferItemList")}} 介面。請參見 Interoperability 以取得有關拖放功能互通性的資訊。
+注意:{{domxref("DragEvent")}} 與 {{domxref("DataTransfer")}} 介面受廣泛的桌面瀏覽器支援。但只有少數瀏覽器支援 {{domxref("DataTransferItem")}} 與 {{domxref("DataTransferItemList")}} 介面。請參見 Interoperability 以取得有關拖放功能互通性的資訊。
Gecko-specific interfaces
diff --git a/files/zh-tw/web/api/htmlformelement/submit_event/index.html b/files/zh-tw/web/api/htmlformelement/submit_event/index.html index d058da4fc7be05..e008766e199ce4 100644 --- a/files/zh-tw/web/api/htmlformelement/submit_event/index.html +++ b/files/zh-tw/web/api/htmlformelement/submit_event/index.html @@ -10,19 +10,19 @@基本資料
-
- 定義規範
-- HTML5
-- Interface
-- {{domxref("Event")}}
-- Bubbles
-- 是
+- 定義規範
+- HTML5
+- Interface
+- {{domxref("Event")}}
+- Bubbles
+- 是
-
雖說在規範上這是個不 bubble 的事件- Cancelable
-- 是
-- Target
-- Element
-- 默認行動
-- 修改(傳送表單內容至伺服器)。
+- Cancelable
+- 是
+- Target
+- Element
+- 默認行動
+- 修改(傳送表單內容至伺服器)。
屬性
diff --git a/files/zh-tw/web/api/htmlinputelement/index.html b/files/zh-tw/web/api/htmlinputelement/index.html index acac6e1459fd5f..92b9ee7e3ba8c8 100644 --- a/files/zh-tw/web/api/htmlinputelement/index.html +++ b/files/zh-tw/web/api/htmlinputelement/index.html @@ -69,7 +69,7 @@屬性
value
string:
Returns / Sets the current value of the control. -Note: If the user enters a value different from the value expected, this may return an empty string.
+Note: If the user enters a value different from the value expected, this may return an empty string.
diff --git a/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html b/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html index 7ddec264e36c93..9051b74cd0691d 100644 --- a/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html +++ b/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html @@ -10,18 +10,18 @@ 一般資訊
-
- 規範
-- DOM L3
-- 介面
-- 若由使用者介面產生,為UIEvent,否則為Event。
-- 是否向上(冒泡)
-- 否
-- 是否為可取消
-- 否
-- 目標對象
-- Element
-- 預設行為
-- 無
+- 規範
+- DOM L3
+- 介面
+- 若由使用者介面產生,為UIEvent,否則為Event。
+- 是否向上(冒泡)
+- 否
+- 是否為可取消
+- 否
+- 目標對象
+- Element
+- 預設行為
+- 無
屬性
diff --git a/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html index dd6f95890ce261..3696961b62f14f 100644 --- a/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html +++ b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html @@ -10,18 +10,18 @@基本資訊
-
- 規格
-- HTML5 Media
-- 介面
-- 事件
-- 是否冒泡
-- 否
-- 是否可取消
-- 否
-- 目標
-- 元素
-- 預設行為
-- 無
+- 規格
+- HTML5 Media
+- 介面
+- 事件
+- 是否冒泡
+- 否
+- 是否可取消
+- 否
+- 目標
+- 元素
+- 預設行為
+- 無
屬性
diff --git a/files/zh-tw/web/api/mouseevent/index.html b/files/zh-tw/web/api/mouseevent/index.html index db80ab8d96d6c0..ffc3d677bfbc7a 100644 --- a/files/zh-tw/web/api/mouseevent/index.html +++ b/files/zh-tw/web/api/mouseevent/index.html @@ -3,7 +3,7 @@ slug: Web/API/MouseEvent translation_of: Web/API/MouseEvent --- -{{APIRef("DOM Events")}}
+{{APIRef("DOM Events")}}
diff --git a/files/zh-tw/web/api/node/clonenode/index.html b/files/zh-tw/web/api/node/clonenode/index.html index 7fe049f094f481..e0fb373646ee22 100644 --- a/files/zh-tw/web/api/node/clonenode/index.html +++ b/files/zh-tw/web/api/node/clonenode/index.html @@ -35,7 +35,7 @@
MouseEvent
介面表示了由使用者經指標裝置(如滑鼠)進行互動所發生的事件。常見的MouseEvent
實作事件包括了 {{event("click")}}、{{event("dblclick")}}、{{event("mouseup")}} 與 {{event("mousedown")}}。範例
備註
-Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using
+addEventListener()
or those assigned to element properties. (e.g.node.onclick = fn
) Moreover, for a <canvas> element, the painted image is not copied.Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using
addEventListener()
or those assigned to element properties. (e.g.node.onclick = fn
) Moreover, for a <canvas> element, the painted image is not copied.The duplicate node returned by
diff --git a/files/zh-tw/web/api/window/domcontentloaded_event/index.html b/files/zh-tw/web/api/window/domcontentloaded_event/index.html index 53fbb821baddf9..f4417c8b43862c 100644 --- a/files/zh-tw/web/api/window/domcontentloaded_event/index.html +++ b/files/zh-tw/web/api/window/domcontentloaded_event/index.html @@ -17,18 +17,18 @@cloneNode()
is not part of the document until it is added to another node that is part of the document using {{domxref("Node.appendChild()")}} or a similar method. It also has no parent until it is appended to another node.Speeding up
General info
-
- Specification
-- HTML5
-- Interface
-- Event
-- Bubbles
-- Yes
-- Cancelable
-- Yes (although specified as a simple event that isn't cancelable)
-- Target
-- Document
-- Default Action
-- None.
+- Specification
+- HTML5
+- Interface
+- Event
+- Bubbles
+- Yes
+- Cancelable
+- Yes (although specified as a simple event that isn't cancelable)
+- Target
+- Document
+- Default Action
+- None.
屬性
diff --git a/files/zh-tw/web/api/window/load_event/index.html b/files/zh-tw/web/api/window/load_event/index.html index 92a2cab5794ec4..771edfd71d720e 100644 --- a/files/zh-tw/web/api/window/load_event/index.html +++ b/files/zh-tw/web/api/window/load_event/index.html @@ -9,18 +9,18 @@一般資訊
-
- 規範
-- DOM L3
-- 介面
-- UIEvent
-- 起泡事件
-- No
-- 可取消
-- No
-- 對象
-- Window
-- 預設行為
-- None.
+- 規範
+- DOM L3
+- 介面
+- UIEvent
+- 起泡事件
+- No
+- 可取消
+- No
+- 對象
+- Window
+- 預設行為
+- None.
屬性
diff --git a/files/zh-tw/web/api/xmlhttprequest/index.html b/files/zh-tw/web/api/xmlhttprequest/index.html index 9e0472f7177c90..bc75fc827818f2 100644 --- a/files/zh-tw/web/api/xmlhttprequest/index.html +++ b/files/zh-tw/web/api/xmlhttprequest/index.html @@ -35,23 +35,23 @@屬性
此介面也繼承了 {{domxref("XMLHttpRequestEventTarget")}} 及 {{domxref("EventTarget")}} 的屬性。
-
@@ -60,13 +60,13 @@- {{domxref("XMLHttpRequest.onreadystatechange")}}
+- {{domxref("XMLHttpRequest.onreadystatechange")}}
- 一個 {{event("Event_handlers", "event handler")}}(事件處理器)函式,會於
-readyState
屬性之狀態改變時被呼叫。- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
- 回傳一個無符號短整數(
unsigned short
)代表請求之狀態。- {{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
- 回傳的內容可能是 {{domxref("ArrayBuffer")}}、{{domxref("Blob")}}、{{domxref("Document")}}、JavaScript 物件或 {{domxref("DOMString")}}。完全根據 {{domxref("XMLHttpRequest.responseType")}} 的值決定回傳的內容為何種型態,資料為回應實體中的內容(response entity body)。
-- {{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
- 回傳一個 {{domxref("DOMString")}},其內容為請求之回應的文字內容。如請求失敗或尚未發送,則為
-null
。- {{domxref("XMLHttpRequest.responseType")}}
+- {{domxref("XMLHttpRequest.responseType")}}
- 為一可列舉(enumerated)值,定義回應內容的資料類型(response type)。
-- {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
- 回傳一個回應(response)的序列化 URL,如 URL 為 null 則回傳空字串。
-- {{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
- 回傳一個 {{domxref("Document")}},其內容為請求之回應內容所解析成的文件物件。如請求失敗或尚未發送,又或是無法解析成 XML、HTML,則為
-null
。Not available in workers.- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
- 回傳一個無符號短整數(
-unsigned short
)表示已發送請求之回應的狀態。- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
- 回傳一個 {{domxref("DOMString")}} 表示 HTTP 伺服器回應之字串。和 {{domxref("XMLHTTPRequest.status")}} 不同的是,
XMLHttpRequest.statusText
包含了回應的整個文字訊息(如 "200 OK
")。屬性
-
diff --git a/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html index 767a4ad430d78e..c570099e973601 100644 --- a/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html +++ b/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -188,7 +188,7 @@- {{domxref("XMLHttpRequest.timeout")}}
+- {{domxref("XMLHttpRequest.timeout")}}
- 為一無符號長整數(
-unsigned long
),代表一個請求在逾時而被自動中止前的可等待時間(毫秒)。- {{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+- {{domxref("XMLHttpRequestEventTarget.ontimeout")}}
- 為一 {{event("Event_handlers", "event handler")}} 物件,會於請求逾時時被呼叫。
-- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
- 為一 {{domxref("XMLHttpRequestUpload")}} 物件,代表上傳的進度。
-- {{domxref("XMLHttpRequest.withCredentials")}}
+- {{domxref("XMLHttpRequest.withCredentials")}}
- {{domxref("Boolean","布林值")}}。表示是否允許在跨站存取(cross-site
Access-Control
)之請求當中,發送如 cookies 或 authorization headers 等憑證資訊(credentials)。Irreplaceability of the synchro
Sending the usual XMLHttpRequest when the page unloaded poses a problem with the asynchronous response from the server: by the time the response comes back, the page has unloaded and the callback function won’t exist anymore. This generates a JavaScript “function is not defined” error.
- +A possible solution is to make sure that any AJAX requests that you make on unload are make synchronously instead of asynchronously. This will ensure that the page doesn’t finish unloading before the server response comes back.
diff --git a/files/zh-tw/web/css/_colon_first-of-type/index.html b/files/zh-tw/web/css/_colon_first-of-type/index.html index 3d0de2ab9226ce..16b498404d7056 100644 --- a/files/zh-tw/web/css/_colon_first-of-type/index.html +++ b/files/zh-tw/web/css/_colon_first-of-type/index.html @@ -52,7 +52,7 @@例二
這個範例展示了當沒有指定一般選擇器(simple selector)時,通用選擇器是如何被預判。
-首先來看 HTML:
+首先來看 HTML:
<div> <span>This `span` is first!</span> @@ -64,13 +64,13 @@-例二 </div>
接著是 CSS:
+接著是 CSS:
div :first-of-type { background-color: lime; }-會有這樣的效果:
+會有這樣的效果:
{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}
diff --git a/files/zh-tw/web/css/border/index.html b/files/zh-tw/web/css/border/index.html index 524f26208fc9c1..baf7780d406f6f 100644 --- a/files/zh-tw/web/css/border/index.html +++ b/files/zh-tw/web/css/border/index.html @@ -59,11 +59,11 @@Syntax
Values
-
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html index 7455913119edf2..58f88ec278bedc 100644 --- a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html +++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html @@ -13,7 +13,7 @@ ---- +
<line-width>
- ">
<line-width>
- Sets the thickness of the border. Defaults to
-medium
if absent. See {{Cssxref("border-width")}}.- +
<line-style>
- ">
<line-style>
- Sets the style of the border. Defaults to
-none
if absent. See {{Cssxref("border-style")}}.- {{cssxref("<color>")}}
+- ">{{cssxref("<color>")}}
- Sets the color of the border. Defaults to
currentcolor
if absent. See {{Cssxref("border-color")}}.Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.
-In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
+In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
(from CSS 2.1 Section 9.9.1 - Layered presentation)
It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS {{ cssxref("z-index") }} property.
diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html index 3728fe6e39609e..849b852e37c7e9 100644 --- a/files/zh-tw/web/css/grid-row/index.html +++ b/files/zh-tw/web/css/grid-row/index.html @@ -46,7 +46,7 @@Values
- Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of
1
.<custom-ident>
- If there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement. -
diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html index 690f7125df7bcb..37dce597cc3c96 100644 --- a/files/zh-tw/web/css/grid-template-columns/index.html +++ b/files/zh-tw/web/css/grid-template-columns/index.html @@ -56,18 +56,18 @@Note: Named grid areas automatically generate implicit named lines of this form, so specifying
+grid-row: foo;
will choose the start/end edge of that named grid area (unless another line namedfoo-start
/foo-end
was explicitly specified before it).Note: Named grid areas automatically generate implicit named lines of this form, so specifying
grid-row: foo;
will choose the start/end edge of that named grid area (unless another line namedfoo-start
/foo-end
was explicitly specified before it).Otherwise, this is treated as if the integer
1
had been specified along with the<custom-ident>
.Values
- Is a non-negative dimension with the unit
-fr
specifying the track’s flex factor. Each<flex>
-sized track takes a share of the remaining space in proportion to its flex factor.When appearing outside a
minmax()
notation, it implies an automatic minimum (i.e.minmax(auto, <flex>)
).- +
max-content
max-content
- Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
min-content
- Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
{{cssxref("minmax", "minmax(min, max)")}}
- Is a functional notation that defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored and the function is treated as min. As a maximum, a
-<flex>
value sets the track’s flex factor. It is invalid as a minimum.- +
auto
auto
- Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
- -
-Note:
+auto
track sizes (and onlyauto
track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.Note:
auto
track sizes (and onlyauto
track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.- +
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
- Represents the formula
min(max-content, max(auto, argument))
, which is calculated similar toauto
(i.e.minmax(auto, max-content)
), except that the track size is clamped at argument if it is greater than theauto
minimum.- {{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
- Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html index dcb2753250b2aa..0d84321c7d3d0a 100644 --- a/files/zh-tw/web/css/grid-template/index.html +++ b/files/zh-tw/web/css/grid-template/index.html @@ -7,7 +7,7 @@{{EmbedInteractiveExample("pages / css / grid-template.html")}}-該交互式示例的源存儲在GitHub存儲庫中。如果您想為交互式示例項目做出貢獻,請克隆https://github.com/mdn/interactive-examples並向我們發送請求請求。
+該交互式示例的源存儲在GitHub存儲庫中。如果您想為交互式示例項目做出貢獻,請克隆https://github.com/mdn/interactive-examples並向我們發送請求請求。
作者可以為長期屬性設置值:{{cssxref("grid-template-rows")}},{{cssxref("grid-template-columns")}}和{{cssxref("grid-template-areas ")}}。
@@ -47,11 +47,11 @@價值觀
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
- Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in
-auto
for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (ornone
, if not specified).
-Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.
+Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.
Note: The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use
+grid
(as opposed togrid-template
) to prevent these values from cascading in seperately.Note: The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use
grid
(as opposed togrid-template
) to prevent these values from cascading in seperately.Formal syntax
diff --git a/files/zh-tw/web/css/syntax/index.html b/files/zh-tw/web/css/syntax/index.html index c777095cb00f59..c2c1ab3d299d66 100644 --- a/files/zh-tw/web/css/syntax/index.html +++ b/files/zh-tw/web/css/syntax/index.html @@ -65,7 +65,7 @@CSS statements
Any statement which isn't a ruleset or an at-rule is invalid and ignored.
-There is another group of statements – the nested statements. These are statements that can be used in a specific subset of at-rules – the conditional group rules. These statements only apply if a specific condition is matched: the
+@media
at-rule content is applied only if the device on which the browser runs matches the expressed condition; the@document
at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.There is another group of statements – the nested statements. These are statements that can be used in a specific subset of at-rules – the conditional group rules. These statements only apply if a specific condition is matched: the
@media
at-rule content is applied only if the device on which the browser runs matches the expressed condition; the@document
at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.See also
diff --git a/files/zh-tw/web/css/transform/index.html b/files/zh-tw/web/css/transform/index.html index 1d934105173ea5..a0bada0d635cc4 100644 --- a/files/zh-tw/web/css/transform/index.html +++ b/files/zh-tw/web/css/transform/index.html @@ -63,9 +63,9 @@語法
值
-
diff --git a/files/zh-tw/web/css/transition-timing-function/index.html b/files/zh-tw/web/css/transition-timing-function/index.html index 63d7fab13bb2d3..3e8f815ea9affa 100644 --- a/files/zh-tw/web/css/transition-timing-function/index.html +++ b/files/zh-tw/web/css/transition-timing-function/index.html @@ -9,7 +9,7 @@- {{cssxref("<transform-function>")}}
+- ">{{cssxref("<transform-function>")}}
- 可使用一個或多個 CSS transform functions。複合的transforms 會由左至右的順序來套用。
-- +
none
none
- 設定為沒有套用任何 transform。
{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}-這個互動式範例存放在 GitHub 專案中,如果你想貢獻,請 Clone https://github.com/mdn/interactive-examples 並發送 PR。
+這個互動式範例存放在 GitHub 專案中,如果你想貢獻,請 Clone https://github.com/mdn/interactive-examples 並發送 PR。
diff --git a/files/zh-tw/web/css/width/index.html b/files/zh-tw/web/css/width/index.html index 11336859c4a563..3f913a6cbabe77 100644 --- a/files/zh-tw/web/css/width/index.html +++ b/files/zh-tw/web/css/width/index.html @@ -158,7 +158,7 @@
Values
- The intrinsic minimum width.
available
{{experimental_inline}}- The containing block width minus horizontal margin, border and padding.
-- +
fit-content
{{experimental_inline}}fit-content
{{experimental_inline}}- The larger of:
- the intrinsic minimum width
diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html index 2542c0182ebc9e..2b6e176b8bd59d 100644 --- a/files/zh-tw/web/html/element/br/index.html +++ b/files/zh-tw/web/html/element/br/index.html @@ -9,7 +9,7 @@{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
+The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
如上所示,
diff --git a/files/zh-tw/web/html/element/code/index.html b/files/zh-tw/web/html/element/code/index.html index d85e8209def37d..b02e00b1c6a5c3 100644 --- a/files/zh-tw/web/html/element/code/index.html +++ b/files/zh-tw/web/html/element/code/index.html @@ -3,7 +3,7 @@ slug: Web/HTML/Element/code translation_of: Web/HTML/Element/code --- -<br>
元素會在需要斷行的時候出現。在<br>
之後的文字會從文字區域的下一行出現。HTML Code 元素(<code>)表現出電腦程式碼的片段。通常,它會由瀏覽器預設的 monospace 字體顯示出來。
+HTML Code 元素(<code>)表現出電腦程式碼的片段。通常,它會由瀏覽器預設的 monospace 字體顯示出來。
diff --git a/files/zh-tw/web/html/element/picture/index.html b/files/zh-tw/web/html/element/picture/index.html index 4ef07e4e47894a..3e7c5b329cc06d 100644 --- a/files/zh-tw/web/html/element/picture/index.html +++ b/files/zh-tw/web/html/element/picture/index.html @@ -11,7 +11,7 @@
{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
+The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
為了決定載入哪一個 URL,{{Glossary("user agent")}} 會檢視每一個
diff --git a/files/zh-tw/web/html/element/summary/index.html b/files/zh-tw/web/html/element/summary/index.html index bc15dbbfb91c60..a03b2dd18e4339 100644 --- a/files/zh-tw/web/html/element/summary/index.html +++ b/files/zh-tw/web/html/element/summary/index.html @@ -47,7 +47,7 @@<source>
的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性,以選出最適合當前版面以及顯示裝置支援度的圖片。DOM interface
Examples
-In summation, get details from the link on the next line
+In summation, get details from the link on the next line
Please see the {{HTMLElement("details")}} page for examples on <summary>.
diff --git a/files/zh-tw/web/html/global_attributes/data-_star_/index.html b/files/zh-tw/web/html/global_attributes/data-_star_/index.html index b6fa5992676255..965df08fba9287 100644 --- a/files/zh-tw/web/html/global_attributes/data-_star_/index.html +++ b/files/zh-tw/web/html/global_attributes/data-_star_/index.html @@ -3,7 +3,7 @@ slug: Web/HTML/Global_attributes/data-* translation_of: Web/HTML/Global_attributes/data-* --- -{{HTMLSidebar("Global_attributes")}}
+{{HTMLSidebar("Global_attributes")}}
data-*全域屬性構成一組稱作自訂 data 屬性的屬性。它能令 HTML 與其 DOM 擁有給腳本用的交換資訊。這種屬性設置的自訂資料,能透過元素的 {{domxref("HTMLElement")}} 介面而活用。{{domxref("HTMLElement.dataset")}} property 允許訪問它們。
@@ -25,7 +25,7 @@*
可以是任何遵循以下規則的 xml 名稱:用法
onclick="spaceships[this.dataset.shipId].blasted()" /> -(參見這個網站)
+(參見這個網站)
規範
diff --git a/files/zh-tw/web/html/global_attributes/index.html b/files/zh-tw/web/html/global_attributes/index.html index 1ad2558f2feda6..bda4112bc7c5e2 100644 --- a/files/zh-tw/web/html/global_attributes/index.html +++ b/files/zh-tw/web/html/global_attributes/index.html @@ -22,22 +22,22 @@說明
-
@@ -71,36 +71,36 @@- +
accesskey
accesskey
- Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
-- +
class
class
- Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method {{domxref("Document.getElementsByClassName()")}}.
-- +
contenteditable
contenteditable
- Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
- +
true
or the empty string, which indicates that the element must be editable;false
, which indicates that the element must not be editable.contextmenu
- Is the
-id
of an {{HTMLElement("menu")}} to use as the contextual menu for this element.- +
data-*
data-*
- Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.
-- +
dir
dir
- Is an enumerated attribute indicating the directionality of the element's text. It can have the following values:
-
- @@ -45,14 +45,14 @@
ltr
, which means left to right and is to be used for languages that are written from the left to the right (like English);說明
auto
, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.- +
draggable
{{experimental_inline}}draggable
{{experimental_inline}}- Is an enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:
-
true
, which indicates that the element may be draggedfalse
, which indicates that the element may not be dragged.- +
dropzone
{{experimental_inline}}dropzone
{{experimental_inline}}- Is an enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values:
- +
- @@ -60,9 +60,9 @@
copy
, which indicates that dropping will create a copy of the element that was dragged說明
link
, will create a link to the dragged data.hidden
- Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
-- +
id
id
- Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
說明
-
- +
itemid
{{experimental_inline}}itemid
{{experimental_inline}}- The unique, global identifier of an item.
-- +
itemprop
{{experimental_inline}}itemprop
{{experimental_inline}}- Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.
-- +
itemref
{{experimental_inline}}itemref
{{experimental_inline}}- Properties that are not descendants of an element with the
-itemscope
attribute can be associated with the item using an itemref. Itemref provides a list of element ids (notitemid
s) with additional properties elsewhere in the document.- +
itemscope
{{experimental_inline}}itemscope
{{experimental_inline}}- Itemscope (usually) works along with itemtype to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
-- +
itemtype
{{experimental_inline}}itemtype
{{experimental_inline}}- Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. Itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
-- +
lang
lang
- Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. xml:lang has priority over it.
-
- +
slot
{{experimental_inline}}slot
{{experimental_inline}}- Assigns a slot in a shadow DOM shadow tree to an element: An element with a
slot
attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches thatslot
attribute's value.-
- +
spellcheck
{{experimental_inline}}spellcheck
{{experimental_inline}}- Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
-
true
, which indicates that the element should be, if possible, checked for spelling errors;false
, which indicates that the element should not be checked for spelling errors.- +
style
style
- Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
-- +
tabindex
tabindex
- Is an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
-
- a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
@@ -108,9 +108,9 @@說明
- a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).
- +
title
title
- Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
-- +
translate
translate
- Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it
s
{{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
- empty string and
diff --git a/files/zh-tw/web/html/index.html b/files/zh-tw/web/html/index.html index 95afe45876ca6b..a6208ad610a009 100644 --- a/files/zh-tw/web/html/index.html +++ b/files/zh-tw/web/html/index.html @@ -57,16 +57,16 @@"yes"
, which indicates that the element will be translated.初學者教學
進階部份
-
@@ -74,24 +74,24 @@- CORS 圖像
-- -
當結合了一個適合的
CORS,crossorigin
屬性允許 {{HTMLElement("img")}} 元素定義的圖像被從一個地方載入,並被使用於 {{HTMLElement("canvas")}},即便載入的地方是原處也一樣。- 設定 CORS 屬性
-- 有些 HTML 元素可以支援 CORS,像 {{HTMLElement("img")}} 或者 {{HTMLElement("video")}},有著
-crossorigin
(crossOrigin
property)的屬性, 讓你能直接使用CORS的元素。- 管理 HTML 中的焦點
-- The
-activeElement
DOM attribute and thehasFocus()
DOM method help you track and control a user's interactions with elements on a web page.- 使用 application cache
-- Application caching lets web-based applications run offline. You can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
-- 使用 rel="preload" 來預載內容
-- The
+preload
value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to howpreload
works.- CORS 圖像
+- +
當結合了一個適合的
CORS,crossorigin
屬性允許 {{HTMLElement("img")}} 元素定義的圖像被從一個地方載入,並被使用於 {{HTMLElement("canvas")}},即便載入的地方是原處也一樣。- 設定 CORS 屬性
+- 有些 HTML 元素可以支援 CORS,像 {{HTMLElement("img")}} 或者 {{HTMLElement("video")}},有著
+crossorigin
(crossOrigin
property)的屬性, 讓你能直接使用CORS的元素。- 管理 HTML 中的焦點
+- The
+activeElement
DOM attribute and thehasFocus()
DOM method help you track and control a user's interactions with elements on a web page.- 使用 application cache
+- Application caching lets web-based applications run offline. You can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
+- 使用 rel="preload" 來預載內容
+- The
preload
value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to howpreload
works.進階部份
參考資料
-
- HTML 參考資料
-- HTML 包含元素,每個元素都可以被幾個屬性修飾。HTML 文件透過連結把彼此連結在一起。
-- HTML 元素參考
-- 瀏覽 HTML 所有元素的清單。
-- HTML 屬性參考
-- HTML 元素都有屬性。這些額外屬性能透過數種方法設定元素、調整行為。
-- 全域屬性
-- HTML 元素能指定全域屬性,就算它不是標準元素。也就是說,即使是與 HTML5 標準不相容的非標準元素,依舊允許全域屬性。
-- 行內元素與塊級元素
-- HTML 元素通常為行內或區塊。行內元素佔據由標籤所定義的其餘空白位置,區塊元素則占據母元素的所有空白位置。
-- 超連結類型
-- 在 HTML 中有多種超連結類型能夠使用,並解定義兩個頁面間的關係,超連結元素包含了
-<a>
,<area>
,<link>
- HTML audio 及 video 元素對媒體的支援程度
-- -
<audio>
及<video>
元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。- HTML 內容種類
-- HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效,而在其它前後關系中無效。相似地,每一組內容,也指定了可以被包含在一起的類別,以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。
-- 怪異模式與標準模式
-- 有關怪異模式與標準模式的歷史。
+- HTML 參考資料
+- HTML 包含元素,每個元素都可以被幾個屬性修飾。HTML 文件透過連結把彼此連結在一起。
+- HTML 元素參考
+- 瀏覽 HTML 所有元素的清單。
+- HTML 屬性參考
+- HTML 元素都有屬性。這些額外屬性能透過數種方法設定元素、調整行為。
+- 全域屬性
+- HTML 元素能指定全域屬性,就算它不是標準元素。也就是說,即使是與 HTML5 標準不相容的非標準元素,依舊允許全域屬性。
+- 行內元素與塊級元素
+- HTML 元素通常為行內或區塊。行內元素佔據由標籤所定義的其餘空白位置,區塊元素則占據母元素的所有空白位置。
+- 超連結類型
+- 在 HTML 中有多種超連結類型能夠使用,並解定義兩個頁面間的關係,超連結元素包含了
+<a>
,<area>
,<link>
- HTML audio 及 video 元素對媒體的支援程度
+- +
<audio>
及<video>
元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。- HTML 內容種類
+- HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效,而在其它前後關系中無效。相似地,每一組內容,也指定了可以被包含在一起的類別,以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。
+- 怪異模式與標準模式
+- 有關怪異模式與標準模式的歷史。
相關焦點
diff --git a/files/zh-tw/web/http/basics_of_http/mime_types/index.html b/files/zh-tw/web/http/basics_of_http/mime_types/index.html index 6dc4c34cdebb3a..ab75aabc6f34ff 100644 --- a/files/zh-tw/web/http/basics_of_http/mime_types/index.html +++ b/files/zh-tw/web/http/basics_of_http/mime_types/index.html @@ -66,7 +66,7 @@Discrete types
Multipart types
-Multipart types indicate a category of document broken into pieces, often with different MIME types; they can also be used — especially in email scenarios — to represent multiple, separate files which are all part of the same transaction. They represent a composite document.
+Multipart types indicate a category of document broken into pieces, often with different MIME types; they can also be used — especially in email scenarios — to represent multiple, separate files which are all part of the same transaction. They represent a composite document.
With the exception of
diff --git a/files/zh-tw/web/http/cookies/index.html b/files/zh-tw/web/http/cookies/index.html index 3947f54716eef6..8d0a91f5441121 100644 --- a/files/zh-tw/web/http/cookies/index.html +++ b/files/zh-tw/web/http/cookies/index.html @@ -57,7 +57,7 @@multipart/form-data
, used in the {{HTTPMethod("POST")}} method of HTML Forms, andmultipart/byteranges
, used with {{HTTPStatus("206")}}Partial Content
to send part of a document, HTTP doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "Save As" window if it doesn't know how to display the document).
Set-Cookie
及Cookie< [page content] -
+現在隨著每個請求,瀏覽器會使用 {{HTTPHeader("Cookie")}} 標頭將所有先前儲存的 cookies 傳給伺服器。
GET /sample_page.html HTTP/1.1 Host: www.example.org diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html index e6a50029303808..401a8f5d0497d6 100644 --- a/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html +++ b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html @@ -12,7 +12,7 @@--
flat()
函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}
+\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html index 0c26b9f308db10..7d4ade391093b8 100644 --- a/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html +++ b/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html @@ -106,9 +106,9 @@凍結陣列
obj1.internal.a // 'aValue'如果要成為一個常數物件,整個物件參考圖 (包含直接指向或間接指向其他物件) 必須都只能指向被凍結的不可變物件。一個物件被稱作不可變是因為它的整個物件狀態 (值或是指向其他物件的參考) 是固定的。注意,string, number 和 boolean 這些原始型別的值是永遠不變的,Function 和 Array 都屬於物件的一種。
+如果要成為一個常數物件,整個物件參考圖 (包含直接指向或間接指向其他物件) 必須都只能指向被凍結的不可變物件。一個物件被稱作不可變是因為它的整個物件狀態 (值或是指向其他物件的參考) 是固定的。注意,string, number 和 boolean 這些原始型別的值是永遠不變的,Function 和 Array 都屬於物件的一種。
-要讓一個物件變成常數物件,就必須遞迴地凍結每個是物件型別的屬性 (稱作深凍結)。只有當你知道物件的參考圖不存在任何循環 的時候才能使用以上遞迴的方式來凍結物件,不然就可能會造成無窮迴圈。一個改善以下範例中 deepFreeze() 來解決無窮迴圈問題的方法是 - 創建一個接受一個路徑參數 (像是陣列) 的內部用函數,用來避免無窮遞迴地呼叫 deepFreeze() - 當發現欲凍結的物件已經出現在之前凍結的物件行列中就不繼續遞迴下去。需要注意的是你可能會不小心凍結一個不應該被凍結的物件,像是 [window]。
+要讓一個物件變成常數物件,就必須遞迴地凍結每個是物件型別的屬性 (稱作深凍結)。只有當你知道物件的參考圖不存在任何循環 的時候才能使用以上遞迴的方式來凍結物件,不然就可能會造成無窮迴圈。一個改善以下範例中 deepFreeze() 來解決無窮迴圈問題的方法是 - 創建一個接受一個路徑參數 (像是陣列) 的內部用函數,用來避免無窮遞迴地呼叫 deepFreeze() - 當發現欲凍結的物件已經出現在之前凍結的物件行列中就不繼續遞迴下去。需要注意的是你可能會不小心凍結一個不應該被凍結的物件,像是 [window]。
// 用這個函數來進行對物件的深凍結 function deepFreeze(obj) { diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/index.html index 2c9e419b0463f9..156617cac9f30e 100644 --- a/files/zh-tw/web/javascript/reference/global_objects/string/index.html +++ b/files/zh-tw/web/javascript/reference/global_objects/string/index.html @@ -226,9 +226,9 @@-alert(String.replace(num, /5/, '2'));
String
通用方法Generics are also available on {{jsxref("Global_Objects/Array", "Array")}} methods.
+Generics are also available on {{jsxref("Global_Objects/Array", "Array")}} methods.
-The following is a shim to provide support to non-supporting browsers:
+The following is a shim to provide support to non-supporting browsers:
/*globals define*/ // Assumes all supplied String instance methods already present diff --git a/files/zh-tw/web/mathml/authoring/index.html b/files/zh-tw/web/mathml/authoring/index.html index 60e4a9c79695a6..cac1ba6fb87849 100644 --- a/files/zh-tw/web/mathml/authoring/index.html +++ b/files/zh-tw/web/mathml/authoring/index.html @@ -303,11 +303,11 @@Server-side Conversion
Graphical Interface
Input Box
TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. Abiword contains a small equation editor, based on itex2MML. Bluegriffon is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.
- +WYSIYWG Editors
Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.
OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called
- +content.xml
.Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as
a+2
is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.Optical Character & Handwriting Recognition
Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel
diff --git a/files/zh-tw/web/media/formats/containers/index.html b/files/zh-tw/web/media/formats/containers/index.html index 482819933652ab..2168c6e4aef3ca 100644 --- a/files/zh-tw/web/media/formats/containers/index.html +++ b/files/zh-tw/web/media/formats/containers/index.html @@ -1124,7 +1124,7 @@Maximizing compatibil
{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
+The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to
diff --git a/files/zh-tw/web/security/insecure_passwords/index.html b/files/zh-tw/web/security/insecure_passwords/index.html index 3d734062dd8d51..94d62d09c96b6b 100644 --- a/files/zh-tw/web/security/insecure_passwords/index.html +++ b/files/zh-tw/web/security/insecure_passwords/index.html @@ -22,12 +22,12 @@video/webm
). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whosetype
is specified asvideo/mp4
. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.Firefox 密碼安全性指標
Firefox 51 以後會在網址列的左方顯示一個紅色劃叉的鎖頭警告標示,如下圖所示。
- +Firefox 52 以後會在任何不安全表單的 URL 欄位與密碼區域清楚呈現警告:
- +Firefox 52 以後還會禁止在不安全表單自動填入密碼。用戶依舊可以藉由下拉列表,填入已存登錄的資訊。
@@ -45,7 +45,7 @@透過 HTTP 提供登入表單
即使表單是傳送到 HTTPS 網址,用戶的登入表單仍未受保護,因為攻擊者可以修改用戶接收到的頁面。例如,攻擊者可插入鍵盤側錄腳本,導致用戶輸入的資料外洩,或變更表單目的地為攻擊者控制的伺服器。網路主控台的安全面板會警告開發者及用戶,並標示這項安全性問題。
- +備註:在 HTTP 文件中嵌入 HTTPS 登入頁面也不安全 — 攻擊者可以變更頁框超連結以指向惡意網站。
@@ -55,7 +55,7 @@在表單行為中使用 H
在這種情況下,任何用戶輸入的資料都以明文傳送。對於任何側錄該網路的人,從資料送出到抵達網頁伺服器,用戶密碼都清楚可見。
- +重複使用相同密碼
@@ -73,4 +73,4 @@參見
- No More Passwords over HTTP, Please! — 提供詳細資訊和常見問題的部落格文章
-{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
+{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
From 4e2334aab2bf15e64c2d0f73b55a7dbcb2fe638d Mon Sep 17 00:00:00 2001 From: A1loDate: Tue, 31 May 2022 14:27:18 +0800 Subject: [PATCH 2/2] Apply suggestions from code review --- files/zh-tw/web/css/border/index.html | 6 +++--- files/zh-tw/web/css/grid-template/index.html | 1 - files/zh-tw/web/css/transition-timing-function/index.html | 1 - files/zh-tw/web/html/element/br/index.html | 1 - files/zh-tw/web/html/element/picture/index.html | 1 - files/zh-tw/web/media/formats/containers/index.html | 1 - 6 files changed, 3 insertions(+), 8 deletions(-) diff --git a/files/zh-tw/web/css/border/index.html b/files/zh-tw/web/css/border/index.html index baf7780d406f6f..b706f3a9f96e1a 100644 --- a/files/zh-tw/web/css/border/index.html +++ b/files/zh-tw/web/css/border/index.html @@ -59,11 +59,11 @@ Syntax
Values
-
diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html index 0d84321c7d3d0a..6c1eddcff1c145 100644 --- a/files/zh-tw/web/css/grid-template/index.html +++ b/files/zh-tw/web/css/grid-template/index.html @@ -7,7 +7,6 @@- ">
+<line-width>
<line-width>
- Sets the thickness of the border. Defaults to
-medium
if absent. See {{Cssxref("border-width")}}.- ">
+<line-style>
<line-style>
- Sets the style of the border. Defaults to
-none
if absent. See {{Cssxref("border-style")}}.- ">{{cssxref("<color>")}}
+- {{cssxref("<color>")}}
- Sets the color of the border. Defaults to
currentcolor
if absent. See {{Cssxref("border-color")}}.{{EmbedInteractiveExample("pages / css / grid-template.html")}}-該交互式示例的源存儲在GitHub存儲庫中。如果您想為交互式示例項目做出貢獻,請克隆https://github.com/mdn/interactive-examples並向我們發送請求請求。
作者可以為長期屬性設置值:{{cssxref("grid-template-rows")}},{{cssxref("grid-template-columns")}}和{{cssxref("grid-template-areas ")}}。
diff --git a/files/zh-tw/web/css/transition-timing-function/index.html b/files/zh-tw/web/css/transition-timing-function/index.html index 3e8f815ea9affa..e5f91aaadf01a8 100644 --- a/files/zh-tw/web/css/transition-timing-function/index.html +++ b/files/zh-tw/web/css/transition-timing-function/index.html @@ -9,7 +9,6 @@{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}-這個互動式範例存放在 GitHub 專案中,如果你想貢獻,請 Clone https://github.com/mdn/interactive-examples 並發送 PR。
diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html index 2b6e176b8bd59d..206ab462f2490c 100644 --- a/files/zh-tw/web/html/element/br/index.html +++ b/files/zh-tw/web/html/element/br/index.html @@ -9,7 +9,6 @@
{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
如上所示,
diff --git a/files/zh-tw/web/html/element/picture/index.html b/files/zh-tw/web/html/element/picture/index.html index 3e7c5b329cc06d..5fcec7d8336783 100644 --- a/files/zh-tw/web/html/element/picture/index.html +++ b/files/zh-tw/web/html/element/picture/index.html @@ -11,7 +11,6 @@<br>
元素會在需要斷行的時候出現。在<br>
之後的文字會從文字區域的下一行出現。{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
為了決定載入哪一個 URL,{{Glossary("user agent")}} 會檢視每一個
diff --git a/files/zh-tw/web/media/formats/containers/index.html b/files/zh-tw/web/media/formats/containers/index.html index 2168c6e4aef3ca..3a82191b741e0a 100644 --- a/files/zh-tw/web/media/formats/containers/index.html +++ b/files/zh-tw/web/media/formats/containers/index.html @@ -1124,7 +1124,6 @@<source>
的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性,以選出最適合當前版面以及顯示裝置支援度的圖片。Maximizing compatibil
{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}-The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to
video/webm
). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whosetype
is specified asvideo/mp4
. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.