From 1dbea6091c473833da97812801214538fe2586fe Mon Sep 17 00:00:00 2001 From: Len Chen Date: Thu, 29 Aug 2019 10:59:07 +0800 Subject: [PATCH 1/4] feat: Translation of "Interaction: alert, prompt, confirm" --- .../1-simple-page/solution.md | 5 +- .../1-simple-page/task.md | 5 +- .../09-alert-prompt-confirm/article.md | 69 ++++++++++--------- 3 files changed, 41 insertions(+), 38 deletions(-) diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md index 903ee7ff3..385042441 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md @@ -1,11 +1,11 @@ -JavaScript-code: +JavaScript 程式碼： ```js demo run let name = prompt("What is your name?", ""); alert(name); ``` -The full page: +整個網頁原始碼： ```html @@ -22,3 +22,4 @@ The full page: ``` + diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md index a65a654e0..a126f3ee8 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md @@ -2,8 +2,9 @@ importance: 4 --- -# A simple page +# 簡單的頁面 -Create a web-page that asks for a name and outputs it. +建立一個網頁，要求輸入一個名字並輸出它。 [demo] + diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md index 8ba414e9c..5c67d9d07 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md @@ -1,48 +1,48 @@ -# Interaction: alert, prompt, confirm +# 互動： alert, prompt, confirm -In this part of the tutorial we cover JavaScript language "as is", without environment-specific tweaks. +此部分的教程涵蓋 "原本" 的 JavaScript，不需對環境做特別調整。 -But we'll still be using the browser as our demo environment, so we should know at least a few of its user-interface functions. In this chapter, we'll get familiar with the browser functions `alert`, `prompt` and `confirm`. +不過我們依然使用瀏覽器做為演示環境，所以我們應該至少知道一些跟使用者互動的函式。在本章，我們將會對 `alert`、`prompt` 和 `confirm` 瀏覽器函式更為熟悉。 ## alert -Syntax: +語法： ```js alert(message); ``` -This shows a message and pauses script execution until the user presses "OK". +會顯示一段訊息並中斷腳本執行直到使用者按下 "OK"。 -For example: +例如： ```js run alert("Hello"); ``` -The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc. until they have dealt with the window. In this case -- until they press "OK". +該顯示訊息的迷你窗口稱之為 *模態視窗 （modal window）*。"模態 (modal)" 這個字代表使用者不能與頁面其他部分互動或按其他按鈕等，直到他們處理了這個視窗為止，在此處為 -- 直到它們按下 "OK"。 ## prompt -The function `prompt` accepts two arguments: +函式 `prompt` 接收兩個參數： ```js no-beautify result = prompt(title, [default]); ``` -It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel. +會顯示一個帶有文字訊息的模態視窗，並有給訪問者輸入的欄位和 OK/Cancel 的按鈕。 `title` -: The text to show the visitor. +: 顯示予使用者的文字。 `default` -: An optional second parameter, the initial value for the input field. +: 可選的第二個參數，為輸入欄位的初始值。 -The visitor may type something in the prompt input field and press OK. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key. +訪問者可在 prompt 輸入欄位寫些東西然後按下 OK。或者可藉由按下 Cancel 取消輸入，或按 `key:Esc` 按鍵。 -The call to `prompt` returns the text from the input field or `null` if the input was canceled. +呼叫 `prompt` 後會回傳輸入欄位的文字，或輸入被取消時則回傳 `null`。 -For instance: +舉個例： ```js run let age = prompt('How old are you?', 100); @@ -50,60 +50,61 @@ let age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old! ``` -````warn header="In IE: always supply a `default`" -The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. +````warn header="在 IE：總是給個 `default`" +第二個參數是可選的，但如果我們沒給，Internet Explorer 會把 `"undefined"` 這個文字插入到 prompt 內。 -Run this code in Internet Explorer to see: +在 Internet Explorer 執行此程式碼來看看： ```js run let test = prompt("Test"); ``` -So, for prompts to look good in IE, we recommend always providing the second argument: +所以為了讓 IE 內的 prompt 看起來沒問題，我們建議總是提供第二個引數： ```js run -let test = prompt("Test", ''); // <-- for IE +let test = prompt("Test", ''); // <-- 為了 IE ``` ```` ## confirm -The syntax: +語法為： ```js result = confirm(question); ``` -The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. +函式 `confirm` 顯示一個模態視窗，包含一個 `問題` 與兩個按鈕：OK 和 Cancel。 -The result is `true` if OK is pressed and `false` otherwise. +若按下 OK 回傳結果是 `true` 否則為 `false`。 -For example: +例如： ```js run let isBoss = confirm("Are you the boss?"); -alert( isBoss ); // true if OK is pressed +alert( isBoss ); // 若按下 OK 則為 true ``` -## Summary +## 總結 -We covered 3 browser-specific functions to interact with visitors: +我們介紹三種瀏覽器相關的函式用來和訪問者互動： `alert` -: shows a message. +: 顯示訊息。 `prompt` -: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`. +: 顯示訊息並要求使用者輸入文字並回傳該文字，若按下 Cancel 按鈕或 `key:Esc` 鍵時，則回傳 `null`。 `confirm` -: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`. +: 顯示訊息並等待使用者按下 "OK" 或 "Cancel"，OK 時回傳 `true`，Cancel/`key:Esc` 時回傳 `false`。 -All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed. +這些方法都是模態：它們暫停腳本執行並讓訪問者無法和頁面其餘部分互動，直到視窗被關掉為止。 -There are two limitations shared by all the methods above: +以上這些方法都有兩個限制： -1. The exact location of the modal window is determined by the browser. Usually, it's in the center. -2. The exact look of the window also depends on the browser. We can't modify it. +1. 模態視窗確切的位置是由瀏覽器決定的，通常會是在中間。 +2. 視窗確切的外觀也是由瀏覽器決定的，我們無法修改。 + +這就是簡單的代價，有其它顯示更好視窗和與使用者互動更為豐富的方法，但若 "花裡胡哨" 沒那麼重要，這些方法已經夠用了。 -That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine. From 16ca276af80be05a5c4a0f85d2e012c6010511b9 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Fri, 30 Aug 2019 09:44:31 +0800 Subject: [PATCH 2/4] doc: modify texting of `1-js/02-first-steps/09-alert-prompt-confirm/article.md` Co-Authored-By: ArvinH --- 1-js/02-first-steps/09-alert-prompt-confirm/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md index 5c67d9d07..79037caee 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md @@ -2,7 +2,7 @@ 此部分的教程涵蓋 "原本" 的 JavaScript，不需對環境做特別調整。 -不過我們依然使用瀏覽器做為演示環境，所以我們應該至少知道一些跟使用者互動的函式。在本章，我們將會對 `alert`、`prompt` 和 `confirm` 瀏覽器函式更為熟悉。 +但因為我們將使用瀏覽器做為演示環境，所以我們應該至少知道一些跟使用者互動的函式。在本章，我們將會對 `alert`、`prompt` 和 `confirm` 瀏覽器函式更為熟悉。 ## alert From b49a4e3289fc726b58f25353f9c091444fea5276 Mon Sep 17 00:00:00 2001 From: Len Chen Date: Fri, 30 Aug 2019 09:45:11 +0800 Subject: [PATCH 3/4] docs: modify texting of `1-js/02-first-steps/09-alert-prompt-confirm/article.md` Co-Authored-By: ArvinH --- 1-js/02-first-steps/09-alert-prompt-confirm/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md index 79037caee..534c5b519 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md @@ -38,7 +38,7 @@ result = prompt(title, [default]); `default` : 可選的第二個參數，為輸入欄位的初始值。 -訪問者可在 prompt 輸入欄位寫些東西然後按下 OK。或者可藉由按下 Cancel 取消輸入，或按 `key:Esc` 按鍵。 +訪問者可在 prompt 輸入欄位寫些東西然後按下 OK。或者可藉由按下 Cancel 或 `key:Esc` 按鍵取消輸入。 呼叫 `prompt` 後會回傳輸入欄位的文字，或輸入被取消時則回傳 `null`。 From 7e9d2acbc25638ad09ec3636c74cf42e926d6edd Mon Sep 17 00:00:00 2001 From: Len Chen Date: Fri, 30 Aug 2019 09:46:08 +0800 Subject: [PATCH 4/4] docs: modify text of `1-js/02-first-steps/09-alert-prompt-confirm/article.md` Co-Authored-By: ArvinH --- 1-js/02-first-steps/09-alert-prompt-confirm/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/09-alert-prompt-confirm/article.md index 534c5b519..19dc9ad91 100644 --- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md +++ b/1-js/02-first-steps/09-alert-prompt-confirm/article.md @@ -106,5 +106,5 @@ alert( isBoss ); // 若按下 OK 則為 true 1. 模態視窗確切的位置是由瀏覽器決定的，通常會是在中間。 2. 視窗確切的外觀也是由瀏覽器決定的，我們無法修改。 -這就是簡單的代價，有其它顯示更好視窗和與使用者互動更為豐富的方法，但若 "花裡胡哨" 沒那麼重要，這些方法已經夠用了。 +這就是簡單的代價，有其它顯示更好視窗和與使用者互動更為豐富的方法，但若不需要太多 "花俏華麗" 的介面，這些方法已經夠用了。