diff options
Diffstat (limited to 'files/zh-tw')
| -rw-r--r-- | files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png | bin | 0 -> 28967 bytes | |||
| -rw-r--r-- | files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html | 143 | ||||
| -rw-r--r-- | files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png | bin | 0 -> 30551 bytes | |||
| -rw-r--r-- | files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png | bin | 0 -> 31414 bytes | |||
| -rw-r--r-- | files/zh-tw/learn/server-side/django/skeleton_website/index.html | 32 | ||||
| -rw-r--r-- | files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html | 29 | ||||
| -rw-r--r-- | files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html | 6 | ||||
| -rw-r--r-- | files/zh-tw/learn/tools_and_testing/github/index.html | 97 | ||||
| -rw-r--r-- | files/zh-tw/mdn/yari/index.html | 24 |
9 files changed, 166 insertions, 165 deletions
diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png Binary files differnew file mode 100644 index 0000000000..9e532a9a36 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/console-log-output.png diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html index 5eec96717b..712c8b84f7 100644 --- a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/index.html @@ -7,35 +7,35 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">當你在練習撰寫上一節的"猜數字"遊戲時，你可能會發現它無法運作。不用擔心，本文將會把你從快被拔光的頭髮中拯救出來，並且給你一些小提示，讓你知道怎麼找出及修正 Javascript 的程式運行錯誤。</p> +<p class="summary">當你在練習撰寫上一節的「猜數字」遊戲時，你可能會發現它無法運作。不用擔心，本文將會把你從快被拔光的頭髮中拯救出來，並且給你一些小提示，讓你知道怎麼找出及修正Javascript的程式運行錯誤。</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">先備:</th> + <th scope="row">先備：</th> <td>基本電腦能力，基本html及css理解以及了解JavaScript是什麼</td> </tr> <tr> - <th scope="row">目標:</th> + <th scope="row">目標：</th> <td>獲得開始解決簡單編碼問題的能力及信心</td> </tr> </tbody> </table> -<h2 id="錯誤類型">錯誤類型</h2> +<h2 id="Types_of_error">錯誤類型</h2> <p>一般來說，當你的編碼有錯誤時，主要有兩種類型</p> <ul> - <li><strong>語法錯誤</strong>: 在編碼中有一些拼字錯誤導致程序完全或部分沒有正常運作。在這個狀況下，通常你會獲得一些錯誤訊息。只要對工具熟悉以及了解錯誤訊息的意思，這種錯誤通常很好修正！</li> - <li><strong>邏輯錯誤</strong>: 這種錯誤代表程式碼的語法正確，但程式完成的部分不是開發者想做的?，意即程式碼執行成功，但返回錯誤的結果。這種錯誤通常比<strong>語法錯誤</strong>還要難修正，因為並沒有錯誤訊息讓我們可以很直接地知道程式碼的問題。</li> + <li><strong>語法錯誤</strong>：在編碼中有一些拼字錯誤導致程式完全或部分沒有正常運作。在這個狀況下，通常你會獲得一些錯誤訊息。只要對工具熟悉以及了解錯誤訊息的意思，這種錯誤通常很好修正！</li> + <li><strong>邏輯錯誤</strong>：這種錯誤代表程式碼的語法正確，但程式完成的部分不是開發者想做的，意即程式碼執行成功，但返回錯誤的結果。這種錯誤通常比<strong>語法錯誤</strong>還要難修正，因為並沒有錯誤訊息讓我們可以很直接地知道程式碼的問題。</li> </ul> <p>好的，但事情並沒有那麼單純——當你越深入，就會發現更多不同的因素。但上述的分類已經足夠應付初期的工程師職涯了。接著，我們將更深入來討論這兩個類型。</p> -<h2 id="一個錯誤範例">一個錯誤範例</h2> +<h2 id="An_erroneous_example">一個錯誤範例</h2> -<p>讓我們從剛剛的猜數字遊戲開始 — 在這個版本中，我們將故意引入一些錯誤以便從中學習。前往 Github 下載一份 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (或運行線上版 <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p> +<p>讓我們從剛剛的猜數字遊戲開始——在這個版本中，我們將故意引入一些錯誤以便從中學習。前往Github下載一份<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a>（或運行線上版 <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>）。</p> <ol> <li>首先，在編輯器與瀏覽器分別開啟你剛下載檔案。</li> @@ -48,75 +48,75 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>現在，先讓我們來看看開發者主控台有沒有提示我們任何錯誤，然後試著修正他們。你會在接下來的段落中學到如何修正這些錯誤。</p> -<h2 id="修復語法錯誤">修復語法錯誤</h2> +<h2 id="Fixing_syntax_errors">修復語法錯誤</h2> -<p>在前篇文章中我們讓你在 <a href="/zh-TW/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具 JavaScript console</a> 中輸入了一些JavaScript 指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的 JavaScript引擎讀取到有語法錯誤的 JavaScript 時會提示一些錯誤訊息。現在讓我們來看看：</p> +<p>在前篇文章中我們讓你在<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" rel="nofollow">開發者工具JavaScript console</a>中輸入了一些JavaScript指令（如果你不記得怎麼打開這個東西，點選前面的連結複習一下）。更重要的是，主控台在瀏覽器的JavaScript引擎讀取到有語法錯誤的JavaScript時會提示一些錯誤訊息。現在讓我們來看看：</p> <ol> - <li>切換到你開啟了 <code>number-game-errors.html</code> 的分頁，然後打開你的 JavaScript 主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> - <li>這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是 Firefox 的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到： + <li>切換到你開啟了<code>number-game-errors.html</code> 的分頁，然後打開你的JavaScript主控台。你應該會看到如下的幾行錯誤訊息：<img alt="" src="not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>這是一個非常容易追尋的錯誤，而且瀏覽器還給你了不少有用的資訊來幫助你（這張截圖是Firefox的，但其他瀏覽器也會提示相似的錯誤訊息）。從左到右，我們可以看到： <ul> - <li>一個紅色的 "X" 代表這是一個錯誤訊息。</li> - <li>一條錯誤訊息提示你什麼東西出錯了："TypeError: guessSubmit.addeventListener is not a function（TypeError: guessSubmit.addeventListener 並不是一個函式）"</li> - <li>一個 "Learn More" 連結連向一個解釋這個錯誤並包含大量詳細資訊的 MDN 頁面。</li> - <li>出錯的 JavaScript 檔案名稱，連結連向開發者工具的除錯器。點下這個連結，你就能看到出錯的那行程式被高亮顯示出來。</li> - <li>在該 JavaScript 檔案中錯誤的行號，還有錯誤發生在該行第幾個字元。在這個例子中，是第 86 行的第 3 個字元。</li> + <li>一個紅色的「X」代表這是一個錯誤訊息。</li> + <li>一條錯誤訊息提示你什麼東西出錯了：「TypeError: guessSubmit.addeventListener is not a function（TypeError: guessSubmit.addeventListener 並不是一個函式）」</li> + <li>一個「Learn More」連結連向一個解釋這個錯誤並包含大量詳細資訊的MDN頁面。</li> + <li>出錯的JavaScript檔案名稱，連結連向開發者工具的除錯器。點下這個連結，你就能看到出錯的那行程式被高亮顯示出來。</li> + <li>在該JavaScript檔案中錯誤的行號，還有錯誤發生在該行第幾個字元。在這個例子中，是第 86 行的第 3 個字元。</li> </ul> </li> - <li>如果我們在編輯器中檢視第 86 行，我們會看到： + <li>如果我們在編輯器中檢視第86行，我們會看到： <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> </li> - <li>主控台提示的錯誤訊息寫著 "guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）"，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開 MDN 確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋 "mdn <em>關鍵字</em>"。為了節省時間，這裡提供你一個捷徑：<code><a href="/zh-TW/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li> - <li>回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript 是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把<code>addeventListener</code> 改成<code>addEventListener</code> 問題就解決了。現在將你的程式碼修正吧。</li> + <li>主控台提示的錯誤訊息寫著「guessSubmit.addeventListener is not a function（guessSubmit.addeventListener 並不是一個函式）」，所以我們大概是哪裡拼錯字了。如果你並不確定一個函式的正確名稱如何拼寫，打開MDN確認看看是個不錯的選擇。最佳做法是在你喜歡的搜尋引擎搜尋「mdn<em>關鍵字</em>」。為了節省時間，這裡提供你一個捷徑：<code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>。</li> + <li>回來看看這個頁面，我們明顯是把函式名稱給拼錯了！記住，JavaScript是會區分大小寫的，所以任何些微的拼寫錯誤甚至是大小寫錯誤都會造成錯誤發生。把<code>addeventListener</code>改成<code>addEventListener</code>問題就解決了。現在將你的程式碼修正吧。</li> </ol> <div class="note"> -<p><strong>Note</strong>: 看看這個 <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> 連結來了解更多有關這類錯誤的資訊。</p> +<p><strong>Note</strong>: 看看這個<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a>連結來了解更多有關這類錯誤的資訊。</p> </div> -<h3 id="語法錯誤：第二回合">語法錯誤：第二回合</h3> +<h3 id="Syntax_errors_round_two">語法錯誤：第二回合</h3> <ol> <li>將你的頁面存檔並重整，你現在應該會看到剛剛的錯誤消失了。</li> - <li>現在試著輸入一個猜測並按下 Submit guess 按鈕，你會發現... 另一個錯誤！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> - <li>這次的錯誤是 "TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）"，在第 78 行的位置。 - <div class="note"><strong>Note</strong>: <code><a href="/zh-TW/docs/Glossary/Null">Null</a></code> 是一個特別的值，代表著「空」、「什麼都沒有」。<code>lowOrHi</code> 被宣告為一個變數，但並沒有被賦予任何有意義的值 — 他既沒有變數型態，也沒有值。</div> + <li>現在試著輸入一個猜測並按下Submit guess按鈕，你會發現...另一個錯誤！<img alt="" src="variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>這次的錯誤是「TypeError: lowOrHi is null（TypeError: lowOrHi 為 null）」，在第78行的位置。 + <div class="note"><strong>Note</strong>：<code><a href="/zh-TW/docs/Glossary/Null">Null</a></code>是一個特別的值，代表著「空」、「什麼都沒有」。<code>lowOrHi</code>被宣告為一個變數，但並沒有被賦予任何有意義的值——他既沒有變數型態，也沒有值。</div> - <div class="note"><strong>Note</strong>: 這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在 <code>checkGuess() { ... }</code> 區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在 <code>checkGuess()</code> 在 86 行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。</div> + <div class="note"><strong>Note</strong>:這個錯誤並沒有在頁面載入完成後就發生，因為這個錯誤發生在一個函式中（在<code>checkGuess() { ... }</code>區塊中）。在之後詳細介紹函式的文章中，你會學到在函式中的程式碼與在函式外的程式碼其實是執行在不同範疇中的。在我們的這個情況裡，有錯誤的程式碼在<code>checkGuess()</code>在86行被執行前都並沒有執行，也因此錯誤並沒有在頁面一載入就發生。</div> </li> - <li>看看第 78 行，你會看到： + <li>看看第78行，你會看到： <pre class="brush: js notranslate">lowOrHi.textContent = 'Last guess was too high!';</pre> </li> - <li>這行試著將 <code>lowOrHi</code> 的 <code>textContent</code> 屬性設為一個字串。但是這行沒有執行成功，因為 <code>lowOrHi</code> 並沒有存著它應該要存著的值。讓我們來看看為什麼 — 試試在程式碼中搜尋其他 <code>lowOrHi</code> 有出現的地方。在第 48 行你會看到： + <li>這行試著將<code>lowOrHi</code>的<code>textContent</code>屬性設為一個字串。但是這行沒有執行成功，因為<code>lowOrHi</code>並沒有存著它應該要存著的值。讓我們來看看為什麼——試試在程式碼中搜尋其他<code>lowOrHi</code>有出現的地方。在第48行你會看到： <pre class="brush: js notranslate">var lowOrHi = document.querySelector('lowOrHi');</pre> </li> - <li>這行程式碼試著將一個 HTML 元素的參照存起來。讓我們檢查一下在這行程式碼執行後，變數中的值是否為 <code>null</code>。在第 49 行加上： + <li>這行程式碼試著將一個HTML元素的參照存起來。讓我們檢查一下在這行程式碼執行後，變數中的值是否為<code>null</code>。在第49行加上： <pre class="brush: js notranslate">console.log(lowOrHi);</pre> <div class="note"> - <p><strong>Note</strong>: <code><a href="/zh-TW/docs/Web/API/Console/log">console.log()</a></code> 是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第 48 行賦值給 <code>lowOrHi</code> 後，將它的值印出至主控台中。</p> + <p><strong>Note</strong>:<code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code>是一個非常好用的除錯功能，它能夠將值印出至主控台中。所以這行程式碼會在第48行賦值給<code>lowOrHi</code>後，將它的值印出至主控台中。</p> </div> </li> - <li>存檔並重整，你應該會在主控台中看到 <code>console.log()</code> 輸出的結果。<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code> 的值是 <code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li> - <li>讓我們思考一下發生了什麼問題。第 48 行呼叫了 <code><a href="/zh-TW/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法來透過 CSS 選擇器取得一個 HTML 元素參照。打開我們的網頁看看我們想要取得的段落元素： + <li>存檔並重整，你應該會在主控台中看到<code>console.log()</code>輸出的結果。<img alt="" src="console-log-output.png" style="display: block; margin: 0 auto;">在這個時間點，<code>lowOrHi</code>的值是<code>null</code>。所以很明顯的，第 48 行一定出了什麼問題。</li> + <li>讓我們思考一下發生了什麼問題。第48行呼叫了 <code><a href="/zh-TW/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 方法來透過CSS選擇器取得一個HTML元素參照。打開我們的網頁看看我們想要取得的段落元素： <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> </li> - <li>所以我們需要的是一個開頭是小數點 (.) 的 class 選擇器，但傳進第48 行 <code>querySelector()</code> 方法的選擇器並沒有開頭的小數點。這也許就是問題所在了！試著將第 48 行的 <code>lowOrHi</code> 改成 <code>.lowOrHi</code>。</li> - <li>再次存檔並重整，你的 <code>console.log()</code> 現在應該會輸出我們想要的 <code><p></code> 元素了。呼！又修好了另一個錯誤！你現在可以把你的 <code>console.log()</code> 那行移除了，或是你想要留著之後查看 — 取決於你。</li> + <li>所以我們需要的是一個開頭是小數點(.)的class選擇器，但傳進第48行<code>querySelector()</code>方法的選擇器並沒有開頭的小數點。這也許就是問題所在了！試著將第48行的<code>lowOrHi</code>改成<code>.lowOrHi</code>。</li> + <li>再次存檔並重整，你的<code>console.log()</code>現在應該會輸出我們想要的<code><p></code>元素了。呼！又修好了另一個錯誤！你現在可以把你的<code>console.log()</code>那行移除了，或是你想要留著之後查看——取決於你。</li> </ol> <div class="note"> -<p><strong>Note</strong>: 看看這個 <a href="/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> 連結來了解更多有關這類錯誤的資訊。</p> +<p><strong>Note</strong>: 看看這個<a href="/zh-TW/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> 連結來了解更多有關這類錯誤的資訊。</p> </div> -<h3 id="語法錯誤：第三回合">語法錯誤：第三回合</h3> +<h3 id="Syntax_errors_round_three">語法錯誤：第三回合</h3> <ol> <li>現在如果你試著再次玩這個遊戲應該會相當順利，直到該讓遊戲結束的時機點才會發生錯誤：無論是猜對還是10次用完。</li> - <li>此時console提供錯誤訊息跟一開始一樣： "TypeError: resetButton.addeventListener is not a function"! 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把<code>addeventListener</code> 改成 <code>.addEventListener</code>就沒問題了。</li> + <li>此時console提供錯誤訊息跟一開始一樣：「TypeError: resetButton.addeventListener is not a function!」 然而此次錯誤來自第94行。查看第94行後，我們可以輕易發現依舊是屬性大小寫問題，一樣把<code>addeventListener</code>改成<code>.addEventListener</code>就沒問題了。</li> </ol> -<h2 id="邏輯錯誤">邏輯錯誤</h2> +<h2 id="A_logic_error">邏輯錯誤</h2> <p>到這邊為止遊戲應該可以進行得很順利，然而玩幾次下來無疑地你會發現「隨機」數字總是0或1，這可不是我們想要的！</p> @@ -134,17 +134,17 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <li>儲存程式碼並更新頁面，然後再試玩幾次，你會看到<code>randomNumber</code> 在console中總是等於1，這就是問題所在。</li> </ol> -<h3 id="修正小錯誤">修正小錯誤</h3> +<h3 id="Working_through_the_logic">修正小錯誤</h3> -<p>為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>以產生一個介於0到1的隨機小數，例如： 0.5675493843</p> +<p>為了修正這個錯誤，我們得先了解它是怎麼運作的。首先，我們呼叫<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>以產生一個介於0到1的隨機小數，例如：0.5675493843</p> <pre class="brush: js notranslate">Math.random()</pre> -<p>接著，我們將<code>Math.random()</code> 產生的隨機小數傳進<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>，函式會回傳小於等於所給數字的最大整數，然後為這個整數值加1：</p> +<p>接著，我們將<code>Math.random()</code>產生的隨機小數傳進<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>，函式會回傳小於等於所給數字的最大整數，然後為這個整數值加1：</p> <pre class="notranslate">Math.floor(Math.random()) + 1</pre> -<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">由於</span></font><code>Math.floor</code>是無條件捨去取整數(地板值)，所以一個介於0到1的隨機小數永遠只會得到0，幫這個小數加1的話又會永遠只得到1。所以進位前我們先幫隨機小數乘上100 ，如此一來我們就能得到介於0到99的隨機數字了：</p> +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">由於</span></font><code>Math.floor</code>是無條件捨去取整數(地板值)，所以一個介於0到1的隨機小數永遠只會得到0，幫這個小數加1的話又會永遠只得到1。所以進位前我們先幫隨機小數乘上100，如此一來我們就能得到介於0到99的隨機數字了：</p> <pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> @@ -154,12 +154,12 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>試著自己動手更新這兩行程式碼吧，儲存並更新頁面後你應該能看到遊戲如預期般進行！</p> -<h2 id="其他常見錯誤">其他常見錯誤</h2> +<h2 id="Other_common_errors">其他常見錯誤</h2> <p>還有些初學者非常容易忽略的小問題，這小節讓我們來概覽一下：</p> -<h3 id="語法錯誤：語句缺少「_」_（SyntaxError_missing_before_statement）">語法錯誤：語句缺少「 ; 」<br> - （SyntaxError: missing ; before statement）</h3> +<h3 id="SyntaxError_missing_before_statement">語法錯誤：語句缺少「 ; 」<br> + SyntaxError: missing ; before statement</h3> <p>這個錯誤是指每行程式碼結束時必須加上英文輸入法的分號<code>;</code>(請注意不要打成中文輸入法)，分號被遺忘的錯誤有時不太容易發現，此外另舉一例：如果我們改動下方變數<code>checkGuess()</code> 中的程式碼：</p> @@ -175,7 +175,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少分號的語法錯誤</em>文章頁面： <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> 。</p> </div> -<h3 id="無論輸入什麼，程序總是顯示「你贏了」">無論輸入什麼，程序總是顯示「你贏了」</h3> +<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter">無論輸入什麼，程式總是顯示「你贏了」</h3> <p>還有另一種混用指派運算子(<code>=</code>)與嚴格比較運算子(<code>===</code>)的狀況，舉例如果我們將變數 <code>checkGuess()</code>中的嚴格比較運算子(<code>===</code>)</p> @@ -187,66 +187,69 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>這個檢查就失效了，程式會永遠回傳 <code>true</code>而勝利並結束遊戲。請小心！</p> -<h3 id="語法錯誤：參數列表後面缺少「」_（SyntaxError_missing_after_argument_list）">語法錯誤：參數列表後面缺少「)」 <br> - （SyntaxError: missing ) after argument list）</h3> +<h3 id="SyntaxError_missing_after_argument_list">語法錯誤：參數列表後面缺少「)」<br>SyntaxError: missing ) after argument list</h3> -<p>給完函數或方法參數時別忘了放上<code>)</code>右括號(請注意不要打成中文輸入法)。</p> +<p>給完函式或方法參數時別忘了放上<code>)</code>右括號（請注意不要打成中文輸入法）。</p> <div class="note"> -<p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少右括號的語法錯誤</em>文章頁面：<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> 。</p> +<p><strong>Note</strong>: 更多細節請參考右方關於<em>缺少右括號的語法錯誤</em>文章頁面：<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>。</p> </div> -<h3 id="語法錯誤：屬性ID後缺少「」_SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br> +<h3 id="SyntaxError_missing_after_property_id">語法錯誤：屬性ID後缺少「:」<br> SyntaxError: missing : after property id</h3> -<p>This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing</p> +<p>這個錯誤通常與JavaScript物件格式錯誤有關，在這個例子中，通過修改</p> <pre class="brush: js notranslate">function checkGuess() {</pre> -<p>to</p> +<p>改成</p> <pre class="brush: js notranslate">function checkGuess( {</pre> -<p>This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!</p> +<p>小心括號的部分！這會讓瀏覽器誤以為我們要把函式的程式內容當成函式參數傳入。</p> -<h3 id="語法錯誤：「」缺少SyntaxError_missing_after_function_body">語法錯誤：「}」缺少SyntaxError: missing } after function body</h3> +<h3 id="SyntaxError_missing_after_function_body">語法錯誤：函式結尾缺少「}」大括號<br>SyntaxError: missing } after function body</h3> -<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p> +<p>很簡單——這通常意味你的函式或條件結構式缺少一個大括號。若我們將<code>checkGuess()</code>函式末段的一個結尾大括號刪除，就會獲得這個錯誤。</p> -<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3> +<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">語法錯誤：預期得到表達式，但實際得到「字串」<br>SyntaxError: expected expression, got '<em>string</em>'</h3> + + <p>或是</p> + + <h3 id="SyntaxError_unterminated_string_literal">語法錯誤：字串字面值未正常結束<br>SyntaxError: unterminated string literal</h3> -<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p> +<p>這些錯誤通常意味著你漏寫一個字串起始或結尾的引號，上面第一個錯誤表示漏寫了字串開頭的起始引號，這導致這裡的「<em>string</em>」會替換瀏覽器發現的意外字串。第二個錯誤則表示字串結尾缺少了結束引號。</p> -<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p> +<p>對於這些錯誤，先思考我們在範例中是如何逐項解決的。當出現錯誤資訊時，先查看該行程式碼行號，按照行號到該行程式碼察看，你可以觀察哪裡出錯了。請記住，錯誤不一定出現在該行程式碼上，而且錯誤原因也可能和我們文章上描述的問題不同！</p> <div class="note"> -<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p> +<p><strong>Note</strong>：有關這些錯誤的詳細資訊，可參閱<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a>與<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a></p> </div> -<h2 id="小結">小結</h2> +<h2 id="Summary">小結</h2> -<p>So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.</p> +<p>那麼，我們得到它了——能在簡易JavaScript程式中找出錯誤的基礎知識。解決程式碼中的錯誤並不總是那麼簡單，但至少本章節可以為你省下幾小時的時間好用來睡覺，並讓你在早期學習過程更快的解決問題。</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">另可參閱</h2> <div> <ul> - <li>There are many other types of errors that aren't listed here; we are compiling a reference that explains what they mean in detail — see the <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> - <li>If you come across any errors in your code that you aren't sure how to fix after reading this article, you can get help! Ask on the <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tell us what your error is, and we'll try to help you. A listing of your code would be useful as well.</li> + <li>還有許多類型的錯誤未列在此頁，我們正在編輯一份參考資料好詳細解釋了它們的含義——可參閱<a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>。</li> + <li>如果你在閱讀本章節遇到了某些程式錯誤而且不知道如何修正，你可以尋求援助！可以至<a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>發問，或者到<a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a>頻道提問。告訴我們你遇到什麼錯誤，我們會盡力幫助你。若能附上你的程式碼會更有幫助。</li> </ul> </div> <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> -<h2 id="在這個學習模組中">在這個學習模組中</h2> +<h2 id="In_this_module">在這個學習模組中</h2> <ul> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什麼是JavaScript？</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/A_first_splash">初次接觸Javascript</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">什麼出錯了？ JavaScript 的疑難排解（除錯）</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊 — 變數</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算— 數字 與 運算子</a></li> - <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字 — JavaScript 的字串</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">出了什麼問題？JavaScript 疑難排解</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables">儲存你需要的資訊——變數</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Math">JavaScript 的基本運算——數字與運算子</a></li> + <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Strings">處理文字——JavaScript的字串</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字串方法</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Arrays">陣列</a></li> <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/Silly_story_generator">附錄：笑話產生器</a></li> diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png Binary files differnew file mode 100644 index 0000000000..7933668aa1 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/not-a-function.png diff --git a/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png Binary files differnew file mode 100644 index 0000000000..bcfd1aed32 --- /dev/null +++ b/files/zh-tw/learn/javascript/first_steps/what_went_wrong/variable-is-null.png 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 b57b351eae..5e08042699 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 @@ -166,7 +166,7 @@ cd locallibrary</pre> <p><font><font>settings.py裡還包括其他的一些設置，現在只需要改變</font></font><a class="external external-icon" href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-TIME_ZONE" rel="noopener" style='font-style: normal; text-decoration: none; color: rgb(63, 135, 166); margin: 0px; padding: 0px; border: 0px; white-space: pre-line; font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(255, 255, 255);'><font><font>時區</font></font></a><font><font><span> </span>—改為和標準</font></font><a class="external external-icon" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" rel="noopener" style='font-style: normal; text-decoration: none; color: rgb(63, 135, 166); margin: 0px; padding: 0px; border: 0px; white-space: pre-line; font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(255, 255, 255);'><font><font>tz時區數據表</font></font></a><font><font><span> </span> 裡的字符串相同就可以了（數據表裡的TZ列有你想要的時區）。</font><font>把</font></font><code style='font-style: normal; margin: 0px; padding: 0px 2px; border: 0px; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; color: rgb(51, 51, 51); font-size: medium; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>TIME_ZONE</code><font><font>的值改為你的時區，比如</font></font></p> -<pre class="brush: python">TIME_ZONE = 'Europe/London'</pre> +<pre class="brush: python">TIME_ZONE = 'Asia/Taipei'</pre> <p style='font-style: normal; margin: 0px 0px 24px; padding: 0px; border: 0px; max-width: 42rem; color: rgb(51, 51, 51); font-family: "Open Sans", arial, x-locale-body, sans-serif; font-size: medium; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>有兩個設置你現在不會用到，不過你應該留意：</font></font></p> @@ -370,19 +370,19 @@ python3 manage.py migrate <h2 id="本教程連結">本教程連結</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">設定 Django 開發環境</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> </ul> diff --git a/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html b/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html index 3e2cae3be5..c34c9369b6 100644 --- a/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html +++ b/files/zh-tw/learn/server-side/django/tutorial_local_library_website/index.html @@ -75,18 +75,19 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website <h2 id="本系列教學">本系列教學</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">設定Django開發環境</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</a><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架 </a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Introduction">Django 介紹</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/development_environment">設定Django開發環境</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django 教學: 本地圖書館網站</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/skeleton_website">Django 教學 第2部分: 建立網站骨架</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Models">Django 教學 第3部分: 使用模型</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Admin_site">Django 教學 第4部分: Django的管理員頁面</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Home_page">Django 教學 第5部分: 創建我們的首頁</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Generic_views">Django 教學 第6部分: 通用列表與詳細視圖</li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Sessions">Django 教學 第7部分: 會話 (Sessions) 框架 </a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Authentication">Django 教學 第8部分: 使用者的身分驗證與權限</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Forms">Django 教學 第9部分: 使用表單</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Testing">Django 教學 第10部分: 測試Django 網頁應用</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/Deployment">Django 教學 第11部分: 部署 Django 到生產環境(production)</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/web_application_security">Django 網頁應用安全</a></li> + <li><a href="/zh-TW/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 迷你部落格</a></li> </ul> diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html index 3dc1b1cd57..7265ee461a 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/angular_building/index.html @@ -22,7 +22,7 @@ tags: <div>{{PreviousMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p>這篇文章內容涵蓋，如何建立一個產品版本（production）的應用程式，以及提供後續的學習資源。</p> +<p>這篇文章內容涵蓋，如何建立一個生產版本（production）的應用程式，以及提供後續的學習資源。</p> <table class="learn-box standard-table"> <tbody> @@ -38,7 +38,7 @@ tags: </tbody> </table> -<h2 id="building_your_finished_application">建立你的應用程式完成版</h2> +<h2 id="building_your_finished_application">建置最終版的應用程式</h2> <p>現在你已經完成開發你的應用程式，接著執行 Angular CLI <code>build</code> 的指令。 當你在 <code>todo</code> 的目錄底下執行 <code>build</code> 的指令，應用程式會編譯並且輸出到 <code>dist/</code> 的目錄下。</p> @@ -68,7 +68,7 @@ tags: <p>現在你已經建立了基本的應用程式，但是你的Angular學習旅程才剛開始，你可以探索Angular文件學習更多，像是：</p> <ul> - <li><a href="https://angular.io/tutorial">英雄之旅</a>：一個深入的 Angular 重點課程，像是使用服務（service）、導覽（navigation）以及從伺服器取得資料。</li> + <li><a href="https://angular.io/tutorial">英雄之旅</a>(<a href="https://angular.tw/tutorial">正體中文版</a>)：一個深入的 Angular 重點課程，像是使用服務（service）、導覽（navigation）以及從伺服器取得資料。</li> <li>Angular <a href="https://angular.io/guide/component-overview">元件</a> 指南：一系列的文章，主題包括生命週期、元件互動以及檢視封裝。</li> <li><a href="https://angular.io/guide/forms-overview">表單</a> 指南：文章內容包含建立Angular的響應式表單、輸入驗證以及建立動態表單。</li> </ul> diff --git a/files/zh-tw/learn/tools_and_testing/github/index.html b/files/zh-tw/learn/tools_and_testing/github/index.html index 8899a3fd1b..2a479a6b3f 100644 --- a/files/zh-tw/learn/tools_and_testing/github/index.html +++ b/files/zh-tw/learn/tools_and_testing/github/index.html @@ -10,85 +10,84 @@ tags: --- <div>{{LearnSidebar}}</div> -<p class="summary">所有開發者都將使用到一些<strong>版本控制系統</strong> (<strong> V</strong>ersion <strong>C</strong>ontrol <strong>S</ strong>ystem, 簡稱<strong> VCS</strong> ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的<strong>版本控制系統</strong>（至少在網絡開發者中是這樣的）是<strong> Git</strong>，和與之關聯的程式社區網站<strong> GitHub</strong > 。這篇短文將帶你簡單地了解他們。 </p> +<p class="summary">所有開發者都將使用到一些<strong>版本控制系統</strong> (<strong> V</strong>ersion <strong>C</strong>ontrol <strong>S</ strong>ystem, 簡稱<strong> VCS</strong> ), 這種工具讓人們可以與其他開發者同公開發一個專案同時避免了不必要的重複與衝突，如果遇到什麼問題，也可以及時回退到之前的版本。當今最流行的<strong>版本控制系統</strong>（至少在網路開發者中是這樣的）是<strong> Git</strong>，和與之關聯的程式社區網站<strong> GitHub</strong >。這篇短文將帶你簡單地了解他們。</p> <h2 id="Overview">概述</h2> <p>版本控制系統在軟體開發過程中是不可或缺的：</p> <ul> - <li>It is rare that you will work on a project completely on your own, and as soon as you start working with other people you start to run the risk of conflicting with each other's work — this is when both of you try to update the same piece of code at the same time. You need to have some kind of mechanism in place to manage the occurrences, and help avoid loss of work as a result.</li> - <li>When working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your computer breaks.</li> - <li>You will also want to be able to roll back to earlier versions if a problem is later discovered. You might have started doing this in your own work by creating different versions of the same file, e.g. <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, etc., but this is really error-prone and unreliable.</li> - <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li> + <li>我們很少獨自完成一個專案，而在分工合作的同時我們都會有與他人的工作相衝突的風險：尤其是當兩個人同時嘗試修改同一段程式碼的時候。所以我們需要有相應的機制用以避免這種情況。</li> + <li>不管是自己一人或與他人一起開發專案時，總希望能夠程式碼能夠及時保存，這樣就可以避免像電腦突然損壞而丟失程式碼的局面。</ li> + <li>如果後期發現了問題，我們可能還會想要回到比較早的版本。有些人在做自己的專案時透過創建同一文件的不同版本，例如 <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js< /code>, <code>myCode_really_really_final.js</code> 之類的文件用於保存歷史版本，但這個方法不可靠，且容易出錯。</li> + <li>不同的團隊成員也會需要創建他們自己的獨特的版本（在Git中叫做<strong>branches</strong>（分支）），他們在這裡添加一些新的功能特性，然後通過一些可控的方法（在GitHub 中我們使用<strong>pull request</strong>（提取要求））將其合併到原來的主幹項目中。</li> </ul> -<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p> +<p>版本控制系統提供了能夠滿足以上需求的工具。 <a href="https://git-scm.com/">Git</a> 是版本控制系統的範例，而<a href="https://github.com/">GitHub</a>是一個為個人或團隊操作Git儲存庫( Git Repositories) 提供了Git伺服器和一系列非常實用的工具的網站+基礎設施。它提供了回報程式碼錯誤、檢查工具以及分配任務和任務狀態等項目管理工具等等。</p> <div class="notecard note"> -<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p> -</div> +<p> <strong>注意</ strong>：Git實際上是一個<em>分散式</ em>版本控制系統，這意味著包含程式碼庫的儲存庫的完整副本是在您的電腦上（以及其他所有人）上創建的。 您可以對自己的副本進行更改，然後將這些更改推送回伺服器，管理員將決定是否將您的更改與主副本合併到主幹上。</ p> +</ div> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web - developer?</h4> + <h4 id="Looking_to_become_a_front-end_web_developer">嘗試成為一位前端網頁程式開發者?</h4> - <p>We have put together a course that includes all the essential information you need to - work towards your goal.</p> + <p>我們準備了一系列的課程當中包括核心的資訊，讓你往你的目標(成為一位前端網頁程式開發者)邁進。</p> - <p><a href="/en-US/docs/Learn/Front-end_web_developer"><strong>Get started</strong></a></p> + <p><a href="/en-US/docs/Learn/Front-end_web_developer"><strong>開始學習</strong></a></p> </div> -<h2 id="Prerequisites">Prerequisites</h2> +<h2 id="Prerequisites">事前準備</h2> -<p>To use Git and GitHub, you need:</p> +<p>要使用Git和GitHub，你需要:</p> <ul> - <li>A desktop computer with Git installed on it (see the <a href="https://git-scm.com/downloads">Git downloads page</a>).</li> - <li>A tool to use Git. Depending on how you like to work, you could use a <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (we'd recommend GitHub Desktop, SourceTree or Git Kraken) or just stick to using a terminal window. In fact, it is probably useful for you to get to know at least the basics of git terminal commands, even if you intend to use a GUI.</li> - <li>A <a href="https://github.com/join">GitHub account</a>. If you haven't already got one, sign up now using the provided link.</li> + <li>一台有安裝Git的電腦 (請參考 <a href="https://git-scm.com/downloads">Git 下載頁面</a>)。</li> + <li>一個工具來使用Git，取決於你喜歡用哪類型工具，你可以使用一個 <a href="https://git-scm.com/downloads/guis/">Git GUI client</a>（我們建議使用GitHub Desktop, SourceTree or Git Kraken）或就使用terminal window。即便你傾向使用GUI，實際上使用terminal window可以幫助你學習一些git的基本指令。</li> + <li>一個 <a href="https://github.com/join">GitHub 帳號</a>。如果你還沒有帳號，建議使用提供的連結去註冊一個帳號並開始用。</li> </ul> -<p>In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub, or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!</p> +<p>就事前必備知識而言，您無需了解所有有關Web開發，Git / GitHub的知識即可開始使用此版本控制系統。 但是，建議您了解一些開發程式碼的知識，並嘗試把一些程式碼存儲在你的儲存庫中！</ p> -<p>It is also preferable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system <code>PATH</code>.</p> +<p>最好還具有一些基本的終端機知識，例如在目錄之間移動，創立文件以及修改系統的<code> PATH </ code>。</ p> <div class="notecard note"> -<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p> -</div> +<p> <strong>注意</ strong>：Github不是唯一網站/工具集讓你使用Git。 您可以嘗試其它替代方法，例如<a href="https://about.gitlab.com/"> GitLab </a>，也可以嘗試設置自己的Git伺服器並使用它來取代GitHub。在本章節中，我們僅停留在GitHub使用教學上。</ p> +</ div> -<h2 id="Guides">Guides</h2> +<h2 id="Guides">其它指南</h2> -<p>Note that the links below take you to resources on external sites. Eventually, we are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject at hand.</p> +<p>請注意，下面的連結將您帶到外部站點上的資源。最終，我們的目標是開設自己的專屬Git / GitHub課程，但目前，這些課程將幫助您掌握相關主題。</ p> <dl> - <dt><a href="https://guides.github.com/activities/hello-world/">Hello, World (from GitHub)</a></dt> - <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd> - <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt> - <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd> - <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt> - <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd> - <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt> - <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd> - <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt> - <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd> -</dl> - -<div class="notecard note"> -<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realize that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p> + <dt> <a href="https://guides.github.com/activities/hello-world/">Hello, World（來自GitHub）</a> </ dt> + <dd>這是一個很好的起點-本實用指南可讓您直接使用GitHub，學習Git的基礎知識，例如創建儲存庫和分支，進行提交以及合併提取要求。</ dd> + <dt> <a href="https://guides.github.com/introduction/git-handbook/"> Git使用手冊（來自GitHub）</a> </ dt> + <dd>這本Git手冊更深入地介紹了版本控制系统是什麼，儲存庫是什麼，基本GitHub模如何運行，Git命令和範例等等。</ dd> + <dt> <a href="https://guides.github.com/activities/forking/">Forking Projects分叉專案（來自GitHub）</a> </ dt> + <dd>當您想為別人的程式碼做貢獻時，Forking Projects分叉專案是必不可少的。本指南說明了方法。</ dd> + <dt> <a href="https://help.github.com/en/articles/about-pull-requests">關於提取要求（來自GitHub）</a> </ dt> + <dd>有用的指南，用於管理請求請求，將建議的程式碼更改傳遞給人們的儲存庫以供考慮。</ dd> + <dt> <a href="https://guides.github.com/features/issues/">掌握問題（來自GitHub）</a> </ dt> + <dd>問題就像是GitHub項目的論壇，人們可以在其中提出問題和報告問題，還可以管理更新（例如，分配人員來解決問題，澄清問題，讓人們知道問題已解決）。本文將提供你有關問題的必備知識。</ dd> +</ dl> + + +<div class="blockIndicator note"> +<p><strong>溫馨提示：</strong> 你還可以用Git跟GitHub來完成更多的事情，但我們認為，如果你想要有效地使用 Git，上面的這些知識是至少應該具備的。當你更深入地了解Git時，你將會意識到，當你開始使用更加複雜的指令時會更容易出錯。但不要擔心，即使是專業的網路工程師有時都會感到困惑，並通過網路檢索或<a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a>和<a href="https://dangitgit.com/"> Dangit, git!</a> 這樣的網站來尋找答案。</p> </div> -<h2 id="See_also">See also</h2> +<h2 id="See_also">也可以參考以下</h2> <ul> - <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li> - <li><a href="https://git-scm.com/docs">Git command list</a></li> - <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li> - <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li> - <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li> - <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li> - <li> - <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p> - </li> -</ul> + <li><a href="https://guides.github.com/introduction/flow/">【理解GitHub流程】</a></li> + <li><a href="https://git-scm.com/docs">【指令列表】</a></li> + <li><a href="https://guides.github.com/features/mastering-markdown/">【掌握Markdown 格式】</a>（在網頁上、評論區常用的格式以及<code >.md</code> 文件所使用的格式，GitHub中的介紹文件(readme.md)即用這種格式書寫）。</li> + <li><a href="https://guides.github.com/features/pages/">【入門 Github 頁面】</a>（如何在GitHub上發布示例和網站）。</li> + <li><a href="https://learngitbranching.js.org/">【學習 Git 的分支結構】</a></li> + <li><a href="https://github.com/k88hudson/git-flight-rules">【Git 中的飛行法則】</a>（ 在Git中實現特定功能的非常有用的方法介紹綱要，包括如何在出錯時糾錯等）。</li> + <li> + <p><a href="https://dangitgit.com/">【該死的Git，Git !】</a>（另一個十分有用的方法介紹綱要，特別是在出錯的時候進行糾正的方法）。</p> + </li> + </ul>
\ No newline at end of file diff --git a/files/zh-tw/mdn/yari/index.html b/files/zh-tw/mdn/yari/index.html index 5d3587a166..07b623bec6 100644 --- a/files/zh-tw/mdn/yari/index.html +++ b/files/zh-tw/mdn/yari/index.html @@ -1,27 +1,25 @@ --- -title: 'Kuma: MDN 的維基平台' +title: "Yari: MDN's rendering platform" slug: MDN/Yari tags: - - Kuma + - Yari - Landing - MDN Meta -translation_of: MDN/Kuma -original_slug: MDN/Kuma --- <div>{{MDNSidebar}}</div> -<div>{{IncludeSubnav("/zh-TW/docs/MDN")}}</div> +<p class="summary">Yari is the code that renders MDN Web Docs. It takes a <a href="https://jamstack.org/">JAMStack</a> approach, which involves taking the MDN content stored as flat source files in a GitHub repo (which include front matter and macro calls), rendering them out to static HTML files, and serving those as quickly and efficiently as possible.</p> -<p>Kuma 是由 MDN Web Docs 維護的 Django 程式碼。</p> +<p>The core MDN platform now actually consists of two GitHub repos:</p> -<p>{{SubpagesWithSummaries}}</p> - -<h2 id="參與_Kuma">參與 Kuma</h2> +<ul> + <li><a href="https://github.com/mdn/content">The MDN content repo</a> — this is where the MDN content is stored, along with information such as contributor history and redirects. Visit this repo if you want to contribute to the MDN content.</li> + <li><a href="https://github.com/mdn/yari">The Yari project</a> — this is the platform code that renders and displays the MDN content, and deals with associated services such as user accounts. Visit this repo if you want to contribute to the MDN platform.</li> +</ul> -<p>要參與 Kuma:</p> +<h2 id="See_also">See also</h2> <ul> - <li>訪問一下 <a href="https://github.com/mozilla/kuma">Github 的 Kuma 專案</a>。</li> - <li>去看一下<a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">貢獻指引</a>。</li> - <li>需要的話，深入探索<a href="http://kuma.readthedocs.org/en/latest/">Kuma 的完整文件</a>。</li> + <li><a href="https://hacks.mozilla.org/2020/10/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN Web Docs evolves! Lowdown on the upcoming new platform</a> — explanation of the need for a platform change, and the new architecture.</li> + <li>As needed, take a deep dive into the <a href="https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/">Welcome Yari: MDN Web Docs has a new platform</a> — formal announcement of the new platform launch.</li> </ul> |
