Hello, world! (#28)

* temp

* finish artile

* translate tasks

* handle blank line

* update colon

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

* Update 1-js/02-first-steps/01-hello-world/article.md

Co-Authored-By: Len Chen <lenchen1112@users.noreply.github.com>

Author: kaddopur

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"]
 

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"]
 

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 <info:task/hello-alert>. Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
+使用前一個任務的答案 <info:task/hello-alert>。將腳本的內容抽出至一個外部檔案 `alert.js` 並將它放在同個資料夾之下。
 
-Open the page, ensure that the alert works.
+開啟頁面，確保提示語正確運行。

1-js/02-first-steps/01-hello-world/article.md

@@ -1,17 +1,17 @@
 # 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"` 來運行你的指令。
 
 
-## The "script" tag
+## "script" 標籤
 
-JavaScript programs can be inserted into any part of an HTML document with the help of the `<script>` tag.
+JavaScript 程式可以使用 `<script>` 標籤插入到 HTML 文件的任何地方。
 
-For instance:
+舉例來說：
 
 ```html run height=100
 <!DOCTYPE HTML>
@@ -35,53 +35,53 @@ For instance:
 ```
 
 ```online
-You can run the example by clicking the "Play" button in the right-top corner of the box above.
+你可以透過點擊上面方框右上角的 "播放" 按鈕來執行這個範例。
 ```
 
-The `<script>` tag contains JavaScript code which is automatically executed when the browser processes the tag.
+當瀏覽器遇到了 `<script>` 標籤，這個標籤中所包含的 JavaScript 程式碼會被自動執行。
 
 
-## Modern markup
+## 現代化標記
 
-The `<script>` tag has a few attributes that are rarely used nowadays but can still be found in old code:
+`<script>` 標籤尚有一些不常用的屬性，你可以在陳年的程式碼中見到它們：
 
-The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
-: The old HTML standard, HTML4, required a script to have a `type`. Usually it was `type="text/javascript"`. It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic; we'll talk about modules in another part of the tutorial.
+`type` 屬性：<code>&lt;script <u>type</u>=...&gt;</code>
+: 在舊的 HTML4 標準中，`<script>` 標籤中的 `type` 屬性是必填的，通常它的值會是 `type="text/javascript"`，目前這個屬性已經不是必填了。而且在現今的 HTML 標準中，這個屬性的內在含義已經完全不同，現在這個屬性可以被用於 JavaScript 模組（modules），這是一個進階的主題，我們會在另外的章節詳細介紹。
 
-The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
-: This attribute was meant to show the language of the script. This attribute no longer makes sense because JavaScript is the default language. There is no need to use it.
+`language` 屬性：<code>&lt;script <u>language</u>=...&gt;</code>
+: 這個屬性是為了表示此腳本所用的語言。在 JavaScript 如今已經變成了預設語言的情況下，這個屬性已沒有意義且不再使用了。
 
-Comments before and after scripts.
-: In really ancient books and guides, you may find comments inside `<script>` tags, like this:
+腳本前後的註解
+: 在真的很古早的書籍和指南中，你或許可以在 `<script>` 標籤內看到註解（comments），像是：
 
     ```html no-beautify
     <script type="text/javascript"><!--
         ...
     //--></script>
     ```
 
-    This trick isn't used in modern JavaScript. These comments hid JavaScript code from old browsers that didn't know how to process the `<script>` tag. Since browsers released in the last 15 years don't have this issue, this kind of comment can help you identify really old code.
+    此用法在現代的 JavaScript 已不復見。這些註解是為了替不支援 `<script>` 標籤的瀏覽器隱藏 JavaScript 程式碼。而由於近 15 年來的瀏覽器都支援 JavaScript，你可以用這種註解來分辨真正過時的程式碼。
 
 
-## External scripts
+## 外部腳本
 
-If we have a lot of JavaScript code, we can put it into a separate file.
+如果我們有大量的 JavaScript 程式碼，我們可以將它們放在一個單獨的檔案中。
 
-Script files are attached to HTML with the `src` attribute:
+腳本檔案可以通過 `src` 屬性添加到 HTML 檔案中：
 
 ```html
 <script src="/path/to/script.js"></script>
 ```
 
-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
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
 ```
 
-To attach several scripts, use multiple tags:
+如果要添加多個腳本，請使用多個標籤：
 
 ```html
 <script src="/js/script1.js"></script>
@@ -90,29 +90,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 `<script>` tag can't have both the `src` attribute and code inside.
+````warn header="如果 `src` 屬性被設置了，`script` 標籤中的內容將會被忽略"
+`<script>` 標籤不能同時含有 `src` 屬性以及包在其中的程式碼。
 
-This won't work:
+這樣寫不會有作用：
 
 ```html
 <script *!*src*/!*="file.js">
-  alert(1); // the content is ignored, because src is set
+  alert(1); // 因為 src 被設置了，此段內容將會被忽略
 </script>
 ```
 
-We must choose either an external `<script src="…">` or a regular `<script>` with code.
+我們只能在二者中擇一，選擇引用外部資源像是 `<script src="…">` ，或是直接編寫程式碼在 `<script>` 中。
 
-The example above can be split into two scripts to work:
+如果要讓上方的範例可以正常運行，請分開寫成兩段：
 
 ```html
 <script src="file.js"></script>
@@ -122,11 +122,11 @@ The example above can be split into two scripts to work:
 ```
 ````
 
-## Summary
 
-- We can use a `<script>` tag to add JavaScript code to a page.
-- The `type` and `language` attributes are not required.
-- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`.
+## 總結
 
+- 使用 `<script>` 標籤在頁面上添加 JavaScript 程式碼。
+- 不再需要 `type` 及 `language` 屬性了。
+- 使用 `<script src="path/to/script.js"></script>` 來引入外部腳本。
 
-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 的執行環境，只是因為在線上閱讀時更方便使用，但它只是多種環境的其中一種。