From d1e3c7374ae25e10e506c854aa2baaa010b56366 Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Fri, 23 Aug 2019 12:32:10 +0800 Subject: [PATCH 01/20] temp --- 1-js/02-first-steps/01-hello-world/article.md | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 489c01adf..ce5d80d0e 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,17 +1,16 @@ # Hello, world! -This part of the tutorial is about core JavaScript, the language itself. +這部份的教學是關於 JavaScript 的核心，討論的是這個語言自身。 -But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. +話雖如此，我們還是需要一個執行環境來運行我們的腳本 (scripts)，而由於本書是線上教學，瀏覽器做為執行環境看起來是一個好選擇。我們會盡可能地減少僅限於瀏覽器的指令 (像是 `alert`)，讓你在其他環境 (像是 Node.js) 運行時，不必多花心力在這些指令上面。有關於在 JavaScript 在瀏覽器中運行的細節會在[之後的章節](/ui)介紹。 -So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. +首先，讓我們看看如何在一個網頁中添加腳本。在伺服器端 (像是 Node.js)，你可以用 `"node my.js"` 來運行你的指令。 +## "script" 標籤 -## The "script" tag +JavaScript 程式可以使用 ` ``` - This trick isn't used in modern JavaScript. These comments hid JavaScript code from old browsers that didn't know how to process the ` ``` -Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder. +這邊的 `/path/to/script.js` 代表從網站根目錄開始，腳本檔案的絕對路徑。我們也可以提供相對於當前頁面的相對路徑。舉例來說，`src="script.js"` 指的前面資料夾中的一個 `"script.js"` 檔案。 -We can give a full URL as well. For instance: +我們也可以提供完整的 URL，例如： ```html ``` -To attach several scripts, use multiple tags: +如果要添加多個腳本，請使用多個標籤： ```html @@ -89,29 +88,29 @@ To attach several scripts, use multiple tags: ``` ```smart -As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. +一般來說，只有簡單的腳本適合直接寫在 HTML 中。比較複雜的腳本請放在獨立的檔案。 -The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). +使用獨立的檔案的好處是，瀏覽器會下載它且將之存入[快取（cache）](https://en.wikipedia.org/wiki/Web_cache)。 -Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. +而當其他頁面需要添加同一個腳本時，就會省略下載而從快取中拿取，這個腳本實際上只被下載了一次。 -That reduces traffic and makes pages faster. +這可以減少流量而使頁面加載變快。 ``` -````warn header="If `src` is set, the script content is ignored." -A single ` ``` -We must choose either an external ` @@ -123,9 +122,8 @@ The example above can be split into two scripts to work: ## 總結 -- We can use a ``. - +- 使用 `` 來引入外部腳本。 -There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. +對於瀏覽器和腳本在頁面上的交互作用還有很多等著我們學習。但請記得，此部份的教程還是關注在 JavaScript 語言本身，我們暫時先不岔題到各個瀏覽器的實作。我們的確是用瀏覽器當做一種 JavaScript 的執行環境，只是因為在在線閱讀時更方便使用，但它只是多種環境的其中一種。 From ffcec294928698f0d8cc2ba46156b414c01b6eeb Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 11:31:34 +0800 Subject: [PATCH 03/20] translate tasks --- 1-js/02-first-steps/01-hello-world/1-hello-alert/task.md | 6 +++--- .../01-hello-world/2-hello-alert-ext/solution.md | 4 ++-- .../02-first-steps/01-hello-world/2-hello-alert-ext/task.md | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md index afed6a91d..c5e46cb2c 100644 --- a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md +++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Show an alert +# 顯示一個提示語 -Create a page that shows a message "I'm JavaScript!". +創建一個頁面來顯示 "I'm JavaScript!" 提示語。 -Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works. +寫在沙盒或是你的硬碟中都沒有關係，只要你確保它能夠正確運行。 [demo src="solution"] diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md index f42c41e6d..906372c46 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md @@ -1,8 +1,8 @@ -The HTML code: +HTML 程式碼： [html src="index.html"] -For the file `alert.js` in the same folder: +使用在同一個資料夾中的 `alert.js`： [js src="alert.js"] diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md index 26168d6a7..e2f974611 100644 --- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md +++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Show an alert with an external script +# 使用外部腳本顯示提示語 -Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder. +使用前一個任務的答案 。將腳本的內容抽出至一個外部檔案 `alert.js` 並將它放在同個資料夾之下。 -Open the page, ensure that the alert works. +開啟頁面，確保提示語正確運行。 From 3734f3345fb113eb16ea7446e9644a32e47fe0c8 Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 11:37:03 +0800 Subject: [PATCH 04/20] handle blank line --- 1-js/02-first-steps/01-hello-world/article.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 4a9ec8574..9b048cbd3 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -6,6 +6,7 @@ 首先，讓我們看看如何在一個網頁中添加腳本。在伺服器端（像是 Node.js），你可以用 `"node my.js"` 來運行你的指令。 + ## "script" 標籤 JavaScript 程式可以使用 `` 來引入外部腳本。 -對於瀏覽器和腳本在頁面上的交互作用還有很多等著我們學習。但請記得，此部份的教程還是關注在 JavaScript 語言本身，我們暫時先不岔題到各個瀏覽器的實作。我們的確是用瀏覽器當做一種 JavaScript 的執行環境，只是因為在在線閱讀時更方便使用，但它只是多種環境的其中一種。 +對於瀏覽器和腳本在頁面上的交互作用還有很多等著我們學習。但請記得，此部份的教程還是關注在 JavaScript 語言本身，我們暫時先不岔題到各個瀏覽器的實作。我們的確是用瀏覽器當做一種 JavaScript 的執行環境，只是因為在線上閱讀時更方便使用，但它只是多種環境的其中一種。 From 88f41595ed16ae05fd3dde5838fa2b5d441fe49a Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 16:04:02 +0800 Subject: [PATCH 07/20] Update 1-js/02-first-steps/01-hello-world/article.md Co-Authored-By: Len Chen --- 1-js/02-first-steps/01-hello-world/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index bebb0e358..d59123245 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,6 +1,6 @@ # Hello, world! -這部份的教學是關於 JavaScript 的核心，討論的是這個語言自身。 +這部份的教程是關於 JavaScript 的核心，討論的是這個語言自身。 話雖如此，我們還是需要一個執行環境來運行我們的腳本（scripts），而由於本書是線上教學，瀏覽器做為執行環境看起來是一個好選擇。我們會盡可能地減少僅限於瀏覽器的指令（像是 `alert`），讓你在其他環境（像是 Node.js）運行時，不必多花心力在這些指令上面。有關於在 JavaScript 在瀏覽器中運行的細節會在[之後的章節](/ui)介紹。 From 50ec9454ccd73aff55cf4189771ae16b658c7b7f Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 16:04:32 +0800 Subject: [PATCH 08/20] Update 1-js/02-first-steps/01-hello-world/article.md Co-Authored-By: Len Chen --- 1-js/02-first-steps/01-hello-world/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index d59123245..a5a8c2d8b 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -2,7 +2,7 @@ 這部份的教程是關於 JavaScript 的核心，討論的是這個語言自身。 -話雖如此，我們還是需要一個執行環境來運行我們的腳本（scripts），而由於本書是線上教學，瀏覽器做為執行環境看起來是一個好選擇。我們會盡可能地減少僅限於瀏覽器的指令（像是 `alert`），讓你在其他環境（像是 Node.js）運行時，不必多花心力在這些指令上面。有關於在 JavaScript 在瀏覽器中運行的細節會在[之後的章節](/ui)介紹。 +話雖如此，我們還是需要一個執行環境來運行我們的腳本（scripts）。由於本書是線上教學，瀏覽器做為執行環境看起來是一個好選擇。我們會盡可能地減少僅限於瀏覽器的指令（像是 `alert`），讓你在其他環境（像是 Node.js）運行時，不必多花心力在這些指令上面。有關於 JavaScript 在瀏覽器中運行的細節會在[之後的章節](/ui)介紹。 首先，讓我們看看如何在一個網頁中添加腳本。在伺服器端（像是 Node.js），你可以用 `"node my.js"` 來運行你的指令。 From cb31764e139a14b33d25f296a6d121cf3be0462d Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 16:04:45 +0800 Subject: [PATCH 09/20] Update 1-js/02-first-steps/01-hello-world/article.md Co-Authored-By: Len Chen --- 1-js/02-first-steps/01-hello-world/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index a5a8c2d8b..b441ec220 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -45,7 +45,7 @@ JavaScript 程式可以使用 `` 來引入外部腳本。 對於瀏覽器和腳本在頁面上的交互作用還有很多等著我們學習。但請記得，此部份的教程還是關注在 JavaScript 語言本身，我們暫時先不岔題到各個瀏覽器的實作。我們的確是用瀏覽器當做一種 JavaScript 的執行環境，只是因為在線上閱讀時更方便使用，但它只是多種環境的其中一種。 From 06e8c6f93cbb42d6cdc516b5d06ac0f6d1883fb4 Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 16:06:17 +0800 Subject: [PATCH 13/20] Update 1-js/02-first-steps/01-hello-world/article.md Co-Authored-By: Len Chen --- 1-js/02-first-steps/01-hello-world/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 3dbe20f87..94252aa4d 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -125,7 +125,7 @@ JavaScript 程式可以使用 `` 來引入外部腳本。 From ae3c3c7306363d24d8dc3018a2e1bfa88854104c Mon Sep 17 00:00:00 2001 From: Jason Huang Date: Sat, 31 Aug 2019 16:06:27 +0800 Subject: [PATCH 14/20] Update 1-js/02-first-steps/01-hello-world/article.md Co-Authored-By: Len Chen --- 1-js/02-first-steps/01-hello-world/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 94252aa4d..ea883e77e 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -100,7 +100,7 @@ JavaScript 程式可以使用 `