recursal/MDN huggingface dataset:
書本清單頁面
======

接下做我們將實作書本列表頁面。這個頁面需要呈現數據庫中所有書本的列表，包含每本書的作者、標題，標題將成為一個超連結，連到書本詳細內容頁面。

控制器
---

書本列表控制器函數，需要獲取數據庫中所有 `Book`對象的列表，然後將這些對像傳給模板進行呈現。

打開 **/controllers/bookController.js**. 找到導出的 `book_list()`控制器方法，並替換為下面的代碼。


```js
// Display list of all Books.
exports.book\_list = function (req, res, next) {
  Book.find({}, "title author")
    .populate("author")
    .exec(function (err, list\_books) {
      if (err) {
        return next(err);
      }
      //Successful, so render
      res.render("book\_list", { title: "Book List", book\_list: list_books });
    });
};
```


該方法使用模型的`find()`函數，返回所有 `Book` 對象，選擇僅返回標題 `title` 和作者 `author`，因為我們不需要其他字段（它也會返回 `_id` 和虛擬欄位字段）。這裡我們還調用 `Book` 上的 `populate()`，指定作者 `author`欄位字段 — 這將用完整的作者信息，替換儲存的書本作者 id。

成功時，傳遞給查詢的回調，將呈現 **book\_list**(.pug) 模板，將標題 `title` 和`book_list`（包含作者的書本列表）作為變量傳遞。

View 視圖
-------

創建 **/views/book\_list.pug** 並複制底下的文字。


```js
extends layout

block content
  h1= title

  ul
    each book in book_list
      li
        a(href=book.url) #{book.title}
        |  (#{book.author.name})

    else
      li There are no books.
```


這個視圖擴展了 **layout.pug** 基本模板，並覆蓋了名為 '**content**' 的 `block` 區塊 。它顯示我們從控制器傳入的標題 `title`（通過 `render()`方法），然後使用 `each`-`in`-`else` 語法，遍歷 `book_list`變量。為每本圖書創建一個列表項，以顯示書名，並作為書的詳細信息頁面的鏈接，後面跟著作者姓名。如果 `book_list`中沒有書，則執行 `else` 子句，並顯示文字 「沒有書本」 'There are no books'。

**備註：** 我們使用 `book.url`，為每本書提供詳細記錄鏈接（我們已經實現了此路由，但尚未實現此頁面）。這是 `Book` 模型的一個虛擬屬性，它使用模型實例的 `_id` 字段，生成唯一的 URL 路徑。

在這裡，我們感興趣的是，每本書被定義為兩行，第二行使用管道（上面高亮顯示）。這種方法是必要的，因為如果作者姓名位於上一行，那麼它將成為超鏈接的一部分。

它看起來像是?
-------

運行本應用 (參見 測試路由 有相關的命令) ，並打開你的瀏覽器，訪問 http://localhost:3000/。然後選擇所有書本連結 *All books*。如果每樣東西都設定正確了，你的網站看起來應該像底下的截圖。

![Book List Page - Express Local Library site](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page/new_book_list.png)

下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
* 繼續教學 5 下個部分: 書本實例清單頁面
書本實例清單頁面
========

接下來，我們將實作圖書館中所有書本實例 (`BookInstance`) 的列表頁面。這個頁面需要包含與每個 `BookInstance` (鏈接到其詳細信息頁面) 關聯的書本 `Book` 標題，以及 `BookInstance`模型中的其他信息，包含每個副本的狀態，印記和唯一 ID。唯一 ID 的文字，應該鏈接到 `BookInstance` 詳細信息頁面。

Controller 控制器
--------------

`BookInstance`列表控制器函數，需要獲取所有書本實例的列表，填充關聯的書本信息，然後將列表傳遞給模板以進行呈現。

打開 **/controllers/bookinstanceController.js**。找到導出的 `bookinstance_list()`控制器方法，並用以下代碼替換它（更改後的代碼以**粗體**顯示）。


```js
// Display list of all BookInstances.
exports.bookinstance\_list = function (req, res, next) {
  BookInstance.find()
    .populate("book")
    .exec(function (err, list\_bookinstances) {
      if (err) {
        return next(err);
      }
      // Successful, so render
      res.render("bookinstance\_list", {
        title: "Book Instance List",
        bookinstance\_list: list_bookinstances,
      });
    });
};
```


此方法使用模型的`find()`函數，返回所有 `BookInstance`對象。然後它將一個調用，以菊花鏈方式連接到 `populate()`，附加書本 `book`欄位字段，這將使用完整的 `Book`文檔，替換每個 `BookInstance`儲存的書本 ID。

成功時，傳遞給查詢的回調，會呈現 **bookinstance\_list** (.pug)模板，並將標題`title`和書籍實例列表 `bookinstance_list`作為變量傳遞。

View 視圖
-------

創建 **/views/bookinstance\_list.pug** ，並複制貼上底下的文字。


```js
extends layout

block content
  h1= title

  ul
    each val in bookinstance_list
      li
        a(href=val.url) #{val.book.title} : #{val.imprint} -
        if val.status=='Available'
          span.text-success #{val.status}
        else if val.status=='Maintenance'
          span.text-danger #{val.status}
        else
          span.text-warning #{val.status}
        if val.status!='Available'
          span  (Due: #{val.due_back} )

    else
      li There are no book copies in this library.
```


這個視圖與其他視圖非常相似。它擴展了佈局，替換內容區塊，顯示從控制器傳入的標題 `title`，並遍歷 `bookinstance_list` 中的所有書籍副本。對於每個副本，我們都會顯示它的狀態（用顏色編碼），如果書本不可用，則顯示其預期返回日期。這裡引入了一個新功能 — 我們可以在標籤之後使用點符號表示法，來指定一個類別。因此，`span.text-success` 將被編譯為 <`span class="text-success"`> (也可以用 Pug 編寫為 `span(class="text-success"`)。

它看起來像是?
-------

運行本應用，打開瀏覽器訪問 http://localhost:3000/，然後選擇 All book-instances 連結。假如每個東西都設定正確了，你的網站看起來應該像是底下的截圖。

![BookInstance List Page - Express Local Library site](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page/locallibary_express_bookinstance_list.png)

下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
* 繼續教學 5 下一個部分: 格式化日期 － 使用 moment.
書本詳情頁面
======

*書本細節頁面*需要呈現一本指定書本(`Book`)的信息, 使用它的 `_id` 字段值(自動產生)做為識別，接著是圖書館中書本實例(`BookInstance`)的信息。無論我們在哪裡呈現一個作者、種類、或書本實例，都應該連結到它的細節頁面。

Controller 控制器
--------------

打開 **/controllers/bookController.js.** ，找到 exported `book_detail()` 控制器方法，用底下的代碼置換。


```js
// Display detail page for a specific book.
exports.book\_detail = function (req, res, next) {
  async.parallel(
    {
      book: function (callback) {
        Book.findById(req.params.id)
          .populate("author")
          .populate("genre")
          .exec(callback);
      },
      book\_instance: function (callback) {
        BookInstance.find({ book: req.params.id }).exec(callback);
      },
    },
    function (err, results) {
      if (err) {
        return next(err);
      }
      if (results.book == null) {
        // No results.
        var err = new Error("Book not found");
        err.status = 404;
        return next(err);
      }
      // Successful, so render.
      res.render("book\_detail", {
        title: "Title",
        book: results.book,
        book\_instances: results.book_instance,
      });
    },
  );
};
```


**備註：** 我們不需要用 require 導入 *async* 和 *BookInstance*，當我們實作主頁面控制器的時候，我們就已經引入這些模組。

此處的控制器方法使用 `async.parallel()`，用平行的方式找到 `Book` 以及它的相應複本 (`BookInstances`) 。這樣的處理方式，就跟上面的 *種類細節頁面* 所說明的完全相同。

View 視圖
-------

創建 **/views/book\_detail.pug** 並加入底下文字。


```js
extends layout

block content
  h1 #{title}: #{book.title}

  p #[strong Author:]
    a(href=book.author.url) #{book.author.name}
  p #[strong Summary:] #{book.summary}
  p #[strong ISBN:] #{book.isbn}
  p #[strong Genre:]&nbsp;
    each val, index in book.genre
      a(href=val.url) #{val.name}
      if index < book.genre.length - 1
        |,

  div(style='margin-left:20px;margin-top:20px')
    h4 Copies

    each val in book_instances
      hr
      if val.status=='Available'
        p.text-success #{val.status}
      else if val.status=='Maintenance'
        p.text-danger #{val.status}
      else
        p.text-warning #{val.status}
      p #[strong Imprint:] #{val.imprint}
      if val.status!='Available'
        p #[strong Due back:] #{val.due_back}
      p #[strong Id:]&nbsp;
        a(href=val.url) #{val._id}

    else
      p There are no copies of this book in the library.
```


在這個模板裡，幾乎每個東西都在先前的章節演示過了。

**備註：** 與該書相關的種類列表，在模板中的實作，如以下代碼。除了最後一本書之外，在與本書相關的每個種類之後，都會添加一個逗號。
```

  p #[strong Genre:]
    each val, index in book.genre
      a(href=val.url) #{val.name}
      if index < book.genre.length - 1
        |,
```


它看起來像是?
-------

運行本應用，並打開瀏覽器訪問 http://localhost:3000/。選擇 *All books* 連結，然後選擇其中一本書。如果每個東西都設定正確了，你的頁面看起來應該像是底下的截圖。

![Book Detail Page - Express Local Library site](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page/locallibary_express_book_detail.png)

下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
* 繼續教學 5 下一個部分: 作者詳情頁面
本地圖書館基礎模板
=========

現在我們了解如何使用 Pug 拓展模板，讓我們開始項目，創建一個基礎模板。這個模板會有一個側邊欄，連結到本教程中將要創建的各個頁面（例如，呈現並創建書本、種類、作者等等），以及一個主要內容區域，我們將在每個頁面中進行覆寫。

開啟 **/views/layout.pug** ，並以下列代碼，置換其內容。


```pug
doctype html
html(lang='en')
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div(class='container-fluid')
      div(class='row')
        div(class='col-sm-2')
          block sidebar
            ul(class='sidebar-nav')
              li
                a(href='/catalog') Home
              li
                a(href='/catalog/books') All books
              li
                a(href='/catalog/authors') All authors
              li
                a(href='/catalog/genres') All genres
              li
                a(href='/catalog/bookinstances') All book-instances
              li
                hr
              li
                a(href='/catalog/author/create') Create new author
              li
                a(href='/catalog/genre/create') Create new genre
              li
                a(href='/catalog/book/create') Create new book
              li
                a(href='/catalog/bookinstance/create') Create new book instance (copy)

        div(class='col-sm-10')
          block content
```


此模板使用（並包含）來自 Bootstrap 的 JavaScript 和 CSS ，以改進 HTML 頁面的佈局和呈現方式。使用 Bootstrap 或其它客戶端網頁框架，是一種快速的方式，可以創建吸引人的網頁，能夠良好地適應不同的瀏覽器尺寸，並且允許我們處理頁面的呈現，而不需要糾纒於任何不同尺寸的細節—此處我們只想專注於伺服端代碼！

佈局的安排應該相當明白，假如你已經閱讀了之前的 模板入門。注意，使用 `block content` 當做定位符號，放到頁面內容將要放置的地方。

基礎模板也參考了一個本地 css 檔 (**style.css**) ，此檔提供了一些額外的樣式。打開 **/public/stylesheets/style.css** ，並用底下的 CSS 代碼，取代它的內容:


```css
.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
```


當我們開始運行網站時，我們應該看到側邊欄出現！在本教程的下個部分，我們將使用以上的佈局，來定義各個頁面。

下一步
---

* 回到 Express Tutorial Part 5: Displaying library data.
* 繼續教學 5 下個章節: Home page (en-US).
書本實例詳情頁面與自我挑戰
=============

書本實例詳情頁面
--------

`BookInstance` 詳情頁面，需要呈現每一個 `BookInstance` 的信息，用 `_id` 欄位字段值（自動產生）做識別。它包含了 `Book` 名稱 (也是一個連結，連到 *書本細節*頁面)，接著是紀錄中的其它的信息。

### Controller 控制器

打開 **/controllers/bookinstanceController.js**. 找到 exported `bookinstance_detail()` 控制器方法，並用底下代碼置換。


```js
// Display detail page for a specific BookInstance.
exports.bookinstance\_detail = function (req, res, next) {
  BookInstance.findById(req.params.id)
    .populate("book")
    .exec(function (err, bookinstance) {
      if (err) {
        return next(err);
      }
      if (bookinstance == null) {
        // No results.
        var err = new Error("Book copy not found");
        err.status = 404;
        return next(err);
      }
      // Successful, so render.
      res.render("bookinstance\_detail", {
        title: "Book:",
        bookinstance: bookinstance,
      });
    });
};
```


該方法使用從 URL（使用路由）中提取的特定書本實例的 ID，調用`BookInstance.findById()`，並通過請求參數（`req.params.id`），在控制器中訪問。然後調用`populate()`來獲取相關 `Book` 的詳細信息。

### View 視圖

創建 **/views/bookinstance\_detail.pug** ，並複製下面的內容。


```js
extends layout

block content

  h1 ID: #{bookinstance._id}

  p #[strong Title:]
    a(href=bookinstance.book.url) #{bookinstance.book.title}
  p #[strong Imprint:] #{bookinstance.imprint}

  p #[strong Status:]
    if bookinstance.status=='Available'
      span.text-success #{bookinstance.status}
    else if bookinstance.status=='Maintenance'
      span.text-danger #{bookinstance.status}
    else
      span.text-warning #{bookinstance.status}

  if bookinstance.status!='Available'
    p #[strong Due back:] #{bookinstance.due_back}
```


本模組中的所有東西，都在先前的章節演示過了。

### 它看起來像是?

運行本應用，並打開瀏覽器訪問 http://localhost:3000//。選擇 *All book-instances* 連結，然後選擇其中一本。如果每個東西都設定正確了，你的網站看起來應該像是底下的截圖。

![BookInstance Detail Page - Express Local Library site](/zh-TW/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge/locallibary_express_bookinstance_detail.png)

自我挑戰
----

目前，我們網站上顯示的大多數日期，都使用默認的 JavaScript 格式（例如 *Tue Dec 06 2016 15:49:58 GMT+1100* （AUS 東部夏令時間））。本文的挑戰，是改善作者`Author`生命週期日期顯示的外觀信息（死亡/誔生日期）和*BookInstance 詳細信息*頁面，使用格式：December 6th, 2016。

**備註：** 你可以使用與我們用於 *Book Instance List* 的相同方法（將生命週期的虛擬屬性，添加到`Author`模型，並使用 moment 來設置日期字符串的格式）。

這個挑戰的要求：

1. 用 BookInstance 詳細信息頁面中的 `due_back_formatted` 替換 `due_back`。
2. 更新作者模塊以添加壽命虛擬屬性。壽命應該有兩個值： *date\_of\_birth - date\_of\_death*，這兩個值的格式與 `BookInstance.due_back_formatted`的日期格式相同。
3. 在當前使用 `date_of_birth` 和 `date_of_death`的所有視圖中，使用 `Author.lifespan` 。
下一步
---

* 回到 Express 教學 5: 呈現圖書館資料
Django 教學 1: 本地圖書館網站
====================

* 前頁
* Overview: Django
* 次頁

我們實戰教學系列的第一篇，會解釋你將學到什麼。並提供一個「本地圖書館」 的例子，作為概述。在接下來的教學裡，我們會不斷完善和改進這個網站。

|  |  |
| --- | --- |
| 前提: | 閱讀 Django 介紹。在接下來的文章裡，你需要創建 Django 開發環境. |
| 目標: | 介紹教學裡使用的網站應用，讓讀者明白要討論的主題。 |

概覽
--

歡迎來到 MDN 的「本地圖書館」Django 教學。在教學裡，我們會開發一個網站，用來管理本地圖書館的目錄。

在這一系列的教學裡，你將:

* 運用 Django 的工具，創建網站和應用的框架。
* 啟動和停止開發用的服務器。
* 創建模型（models）用來表示應用裡的數據。
* 運用 Django 的 admin 網站，以填充網站數據。
* 面對不同的網路請求，創建視圖函數（views）取回相應的數據。並把數據用模板（templates ），渲染成 HTML ，展示在瀏覽器裡。
* 創建網路映射，將不同的 URL 模式，分發給特定的視圖函數（views）。
* 添加用戶認證和會話（sessions），管理網站行為和進入權限。
* 使用表單。
* 為應用編寫測試。
* 有效運用 Django 的安全系統。
* 把應用佈置到生產環境中。

關於這些主題，你已經學會了一些，並對其他的也有了簡單的了解。在這系列教學的最後，你會學到足夠多，而可以自己開發簡單的 Django 應用了。

本地圖書館網站
-------

本地圖書館，是我們在本系列教學裡，創建和不斷改善的網站。跟你期望的一樣，這個網站的目標，是為一個小型的圖書館，提供一個線上目錄。在這個小型圖書館裡，用戶能瀏覽書籍，和管理他們的帳號。

這個例子是精心挑選出來的，因為它可以根據我們的需要，增加或多或少的細節。也能用來展示，幾乎所有的 Django 特性。更重要的是，它提供了一條指南式的路線，在這條路線中，我們會用到 Django 網路框架最重要的功能：

* 在第一篇教學裡，我們會定義一個，簡單到只能瀏覽的圖書館。圖書館的會員，可以查找哪些書可以借閱。我們得以探索那些，幾乎所有網站都會運用的操作：閱讀和展示數據庫裡的內容。
* 接下來，圖書館會慢慢擴展，以展示更高級的 Django 特性。例如，我們會擴展功能，讓會員能夠保留圖書。這個特性會展示如何使用表單，並支持用戶認證。

儘管這是一個非常容易擴展的例子，它被稱為本地圖書館是有原因的——我們希望用最少的訊息，幫助你快速創建、和運用 Django。最後，我們會存儲圖書訊息，圖書數量，作者和其他重要訊息。我們不會儲存圖書館可能會儲存的其他訊息，或是提供一個支持多個圖書館、或是 」大型圖書館「 功能的建構。

我卡住了，從哪裡獲得源程式碼呢？
----------------

在學習本系列教程時，我們會提供合適的代碼片段，你可以粘貼複製，但是有些代碼我們希望你能自己擴展（在提示下）。

如果你卡在某個地方，你可以在 Github 裡找到網站的完整代碼。

總結
--

現在你對本地圖書館網站有了一些了解並知道你會學到什麼。是時候創建我們例子會用到的網站框架了。

* 前頁
* Overview: Django
* 次頁
JavaScript 物件介紹
===============

在 JavaScript 裡面，從諸如字串與陣列的核心功能、到以 JavaScript 建構的瀏覽器 API，大部分的東西都可算是「物件 (Object)」。你甚至可建立自己的物件，將相關函式與變數封裝 (Encapsulate) 為有效封包，並可作為多樣的資料容器 (Data container)。如果你想更精進既有的程式語言知識，就必須了解 JavaScript 的「物件導向 (Object-Oriented；OO)」本質。為此，我們設計了相關文章來協助你更進一步。本文將先說明物件理論和語法的細節，再引導你建立自己的物件。

必備條件
----

在開始閱讀本文之前，你應該已經對 HTML 與 CSS 有一定程度的認識。建議你先看過〈HTML 介紹 (en-US)〉以及〈CSS 介紹〉，再開始了解 JavaScript。

你也應該已經初步了解過 JavaScript 基本概念，再進一步閱讀 JavaScript 物件。所以另請先看過〈JavaScript 的第一步〉與〈JavaScript 基礎要件〉。

**備註：** 如果你在使用的桌機＼平板＼其他裝置，無法讓你建立自己的檔案，則可透過如 JSBin 或 Glitch 的線上編碼程式，來體驗（大多數的）範例程式碼。

指南
--

物件基本概念

第一篇主述 JavaScript 物件。我們將說明基本的 JavaScript 物件語法，並重新講解某些先前已經說過的 JavaScript 功能，也會再提及許多物件是你現正使用中的功能。

適合初學者的 OO JaveScript

說明過基本概念之後，就會將重點放在物件導向的 JavaScript (OOJS) 本質上。本文會先介紹 OO 程式設計的基礎理論，再說明 JavaScript 是如何透過建構子 (Constructor) 函式模擬物件類別並建立物件實體 (Instance)。

物件原型

原型 (Prototype) 是 JavaScript 物件用以互相繼承功能的機制，且其與典型 OO 程式語言中的繼承機制有所不同。本文將探討其中相異性、說明原型鏈的運作方式，並透過原型屬性將函式新增至現有建構子。

JavaScript 中的繼承

再說明了 JavaScript 大多數的 OO 特性之後，將說明應如何建立「子」物件類別 (建構子) 並繼承其「母」類別的功能。此外，我們將針對你可能使用 OOJS 的時機提供建言。

利用 JSON 資料

JavaScript Object Notation (JSON) 為標準格式，用以將「結構化資料 (Structured data)」呈現為 JavaScript 物件，並常用於網站之間呈現＼傳輸資料 (如從伺服器傳送資料到用戶端，以於網頁上顯示內容)。你一定會常接觸到類似情形，所以本文將提供用 JavaScript 搭配 JSON 開發時的所有資訊，包含在 JSON 物件中存取資料項目，以及撰寫你自己的 JSON。

物件打造實例

前幾篇文章帶領你看過基本的 JavaScript 物件理論和語法細節，幫你打下厚實的基礎。而本文要讓你實際操作，透過更多實例自訂出 JavaScript 物件，讓你享受多采多姿的學習過程 (讓你寫出彩色的跳跳球喔)。

評量
--

為彩色跳跳球展示範例新增其他功能

在此評量中，你已經先寫出了跳跳球範例。接著要讓你新增其他有趣的功能。
JavaScript building blocks
==========================

在本單元中，我們繼續介紹所有 JavaScript 的關鍵基本功能，將注意力轉向常見的代碼塊類型，如條件語句，循環，函數和事件。 你已經在課程中看到了這些東西，但只是順便說一下 - 在這裡我們將明確地討論它。

先決條件
----

開始這個模組之前，你應該已經熟悉 HTML 和 CSS 的基礎知識了，你也應該閱讀完前一個模組 - JavaScript 入門 - 的內容了。

**備註：** 假如你正使用平板、電腦或任何無法讓你可以建立檔案的裝置時，你可以試著透過線上程式碼工具（像是 JSBin 或 Glitch）測試文章的測試碼。

指南
--

在代碼中做出決定 - 條件

在任何編程語言中，代碼都需要根據不同的輸入做出決策並相應地執行操作。 例如，在遊戲中，如果玩家的生命數量為 0，則遊戲結束。 在天氣應用程序中，如果在早上查看，則顯示日出圖形; 如果是夜晚，則顯示星星和月亮。 在本文中，我們將探討條件結構如何在 JavaScript 中工作。

程式碼迴圈

有時候你需要超過一行的程式碼完成一項任務，舉例來說：尋找一個擁有許多名字的清單。透過編輯程式，迴圈可以幫助你完美的完成這項工作，在本文中，我們將探討迴圈的結構如何在 JavaScript 中運作。

函式 — 可重複使用的程式碼區塊

撰寫程式的另一個基本概念是函式 (function)，它允許你在一個定義好的區塊內，存放一些程式碼。定義好的函式後，無論你需要在一個單一簡短的指令列用到它，或者是重複使用相同的片段程式碼，你都可以不段重複地呼叫這些函式執行對應的內容。在本文中，我們將探索函式的基本概念，像是基本語法、如何定義函式內容、以及函式將會使用的參數。

建立自己的函式 (en-US)

前面許多文章已經提到大部分的基本理論基礎了，在本文中，我們將分享一個實際的經驗，你將學習到關於打造自定義函式的實務範例。透過這樣的學習方式，我們也進一步解釋一些函式相關的細節知識。

函式回傳值 (en-US)

這堂課程中最後一個想要說明的基本概念就是函式的回傳值，一些函式執行完畢後，不會回傳一個數值；但有些函式則會。理解這些函式的回傳值是重要的概念，本文中，你將學會如何在自定義的函式中，回傳有用的數值提供給其他函式使用。

事件介紹 (en-US)

事件代表你所撰寫的程式在一套系統內所產生的動作或發生的事情，舉例來說：假如一位使用者在網頁點擊一個按鈕時，你可能想要讓使用者點擊該按鈕後，在畫面呈現一個訊息方塊。在本課程最後一篇文章內，我們將討論一些與事件相關的重要概念、以及這些事件在瀏覽器中，如何呈現給使用者。

評量
--

下方的試題將會測驗你對於上述幾項概念的 JavaScript 基本知識。

圖庫

我們已經看過許多 JavaScript 的基礎程式碼，我們將測驗你關於迴圈、函式、條件式迴圈與事件等相關的知識，測驗的方式是透過建立一個由 JavaScript 打造而成的圖庫應用程式。
用戶端 Web API
===========

在為網站或應用程式編寫用戶端 JavaScript 時，你將很快遇到應用程式介面（API）。API 是應用程式介面，用於操作運行站點的瀏覽器和操作系統的不同方面，或操縱來自其他網站或服務的資料。在本單元中，我們將探討 API 是什麼，以及如何使用你在開發工作中經常遇到的一些最常見的 API。

必備知識
----

為了最有效學習本模組，你應該完成在此之前的一系列 JavaScript 模組（JavaScript 第一步、JavaScript 基礎要件與 JavaScript 物件介紹）。那些模組皆涉略到 API 的簡單用法，因為寫前端 JavaScript 很難不用到。在本教學中，我們假設你對核心 JavaScript 語言已有相當程度的認識，而我們將更深入探索常見的 Web API。

了解 HTML 和 CSS 的基礎知識也會有所幫助。

**備註：** 假如你正在使用 電腦/平板/其他裝置，你不需要建立自己的檔案，你可以嘗試線上程式撰寫系統來撰寫範例程式，像是 JSBin 或 Glitch。

概觀
--

Web API 簡介 (en-US)

首先，我們將從 API 的宏觀視角開始看起——它是什麼、如何運作、如何在程式碼裡運用，以及它是如何建構起來的？我們還將探討不同 API 主要類別分別是什麼，以及它們有什麼功能。

文件操作 (en-US)

在撰寫網頁或應用程式時，你會想做的其中一件最常見的事情，是透過某個辦法操控網頁文件。這通常藉由使用文件物件模型（Document Object Model，簡稱 DOM）達成，這是一組 API，用來控制 HTML 與修飾大量使用 `Document` (en-US) 物件的訊息。這篇文章中，我們將深入探索如何使用 DOM，以及其它一些能把你的環境變得很有趣的好玩 API。

從伺服器獲取資料

另一個在當今網站與應用程式非常常見的任務是從伺服器獲取個別資料來更新網頁的一部份而不用重新渲染整個網頁。這個似乎不起眼的小細節對網站效能與表現有著巨大影響。這篇文章中，我們將解釋概念，並看看讓這件事成真的技術，像是 `XMLHttpRequest` 以及 Fetch API。

第三方 API (en-US)

我們到目前為止提到的 API 皆內建在瀏覽器裡，但並非所有 API 都是。許多像 Google 地圖、Twitter、Facebook、PayPal 等等的大型網站與服務皆提供 API 讓開發者能利用他們的資料（例如將 Twitter 貼文顯示在你的部落格上）或服務（例如將自訂 Google 地圖顯示在你的網站上、或讓你的使用者透過 Facebook 帳號登入）。這篇文章會看到瀏覽器 API 與第三方 API 的區別，以及後者的一些典型用法。

繪製圖形 (en-US)

瀏覽器含有一些非常強大的圖形程式設計工具，從可縮放向量圖形（SVG）語言，到用來在 HTML `<canvas>` 元素與 WebGL (en-US)) 上繪圖的 API。這篇文章介紹 Canvas API，並提供讓你能深入學習的資源。

視訊及音訊 API (en-US)

HTML5 擁有將多媒體嵌入到文件中的元素——`<video>` (en-US) 及 `<audio>` (en-US)——並衍生出用來控制播放、查詢等等的它們自己的 API。這篇文章向你展示如何做到諸如創造自訂播放器等常見任務。

用戶端儲存 (en-US)

當今網路瀏覽器提供很多不同技術，讓你能儲存網站相關的資料並在需要時取出，使你能長期保存資料、離線儲存網站，以及更多。這篇文章用最簡單的方式解釋這些如何運作。
非同步的 JavaScript
===============

在本單元我們來討論非同步的（ asynchronous ） JavaScript ，為何其如此重要，並了解它如何有效率的處理像是從伺服器獲取資源的這類潛在性阻塞（ blocking ）操作

#### 想要成為前端開發人員?

我們已為你準備一門實現你目標所需要具備的所有基礎知識課程

**立即開始** (en-US)

事前準備
----

非同步的 JavaScript 是一個相當進階的主題，因此建議你在嘗試本單元前能先通過 JavaScript 初探以及 JavaScript 構成元素單元。

如果你對非同步程式設計的概念還不太熟悉，強烈建議你應該先從非同步程式設計通用概念的文章開始學習。如果你已經具備其概念，那麼你或許可以跳至非同步的 JavaScript 介紹單元開始。

**備註：** 如果你正在使用電腦／平板／任何其它無法讓你建立檔案的裝置上，你可以嘗試在 JSBin 或是 Glitch 上測試本單元的範例程式碼。

指南
--

非同步程式設計通用概念

在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前你應該先具備這些觀念。

非同步的 JavaScript 介紹

在本篇文章中我們會先簡短的回顧我們在同步的 JavaScript 中所遭遇到的問題，並預先看看稍後將會使用哪些非同步的 JavaScript 技巧來解決此問題。

協同的非同步 JavaScript ： Timeout 和 interval

在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式（例如：每秒發生的次數）讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。

優雅的使用 Promise 來處理非同步操作 (en-US)

Promise 是在 Javascript 語言中相對較新的功能，它能夠讓你延遲活動直到先前的活動回報完成或失敗。這方法對設置一連串的操作並讓其正確的循序執行相當有用。本篇文章向你展示 Promise 是如何運作，你將會看到如何被使用在 WebAPI ，以及如何寫出屬於自己的 Promise 。

利用 async 及 await 讓非同步程式設計變得更容易 (en-US)

Promise 在設置上可能會有些複雜並難以理解，因此現代瀏覽器已經實作出 `async` 函式以及 `await` 運算子。前者能夠讓標準的函式隱含的使用 Promise 方式來實現非同步行為，然而後者可以被用在 `async` 函式內部，讓程式碼繼續執行之前去等待一個 Promise 完成。這能讓我們在鏈結一連串的 Promise 的情況之下更加簡潔易懂。

參閱
--

* Asynchronous Programming 來自作者為 Marijn Haverbeke 的極佳的 Eloquent JavaScript 電子書。
JavaScript 初探
=============

帶領各位開始體驗撰寫 JavaScript 前，在第一個 JavaScript 單元中，我們首先來回答一些基本的問題，像是「什麼是 JavaScript 啊？」、「它長什麼樣子？」以及「它能拿來做什麼？」。之後我們會詳細討論幾個關鍵元素，諸如變量(variables)、字串(strings)、數字(numbers)和陣列(arrays)。

事前準備
----

在開始這個教學之前，你不需要具備任何的 JavaScript 相關知識，但是你應該對 HTML 及 CSS 有一點熟悉。建議你在開始學習 JavaScript 前，先看過下列內容 :

* 開始使用 Web (包括 JavaScript 基礎簡介).
* HTML 簡介.
* CSS 簡介.

**備註：** 假如你正在使用 電腦/平板/其他裝置，你還不需要知道如何建立自己的檔案，你可以在線上程式撰寫系統來嘗試範例程式，像是 JSBin 或 Glitch。

概觀
--

什麼是 JavaScript?

歡迎來到 MDN JavaScript 新手村教學！在第一個章節中我們將一個較高的層次看 JavaScript，回答像是「它是什麼？」、「有什麼用？」之類的問題，並且確保你能了解 JavaScript 的目的。

和 JavaScript 的第一次接觸

現在你已經學到一些關於 JavaScript 的原理，以及可以用它來作什麼，我們將經由完整的引導，給你一個關於 JavaScript 基礎功能的速成課。這裡你將會一步一步地建立一個簡單的「猜數字」遊戲。

什麼出錯了？ JavaScript 的疑難排解（除錯）

當你在前一章節建立的「猜數字」遊戲過程中，你可能會發現它不能運作。不要慌，這個章節的目的是提供一些提示，用來找出及修正在 JavaScript 程式裡的錯誤，讓你不會因為這些問題而煩惱。

儲存你需要的資訊 — 變數

在讀過前面幾個章節後，你現在應該能由較高的層次了解 JavaScript 是什麼，它能為你做些什麼，如何與其他的網站技術一起使用，以及它的主要的特性。在本章節中，我們將深入探討真正的基礎知識，看看 JavaScript 最基本的組成 — 變數（Variables）是如何運作 。

JavaScript 的基本運算— 數字 與 運算子

本章的重點，我們討論 JavaScript 的數值計算 — 我們如何依我們的要求組合運算子與其它元素來操控數值。

處理文字 — JavaScript 的字串

接下來我們將焦點轉到字串（strings） — 這是程式裡對一段文字的稱呼。這個章節我們將會檢視學習 JavaScript 中，所有你通常想要知道於字串事情，例如創建字串、字串跳脫（escaping）操作，以及把它們組合起來。

有用的字串方法

我們已經看過了字串的基礎知識，現在讓我們加快腳步，看看可以使用內建的方法對字串進行哪些有用的操作 ，例如：取得字串的長度、串接或分割字串、替換字串中的某個字……等等。

陣列

在這個單元的最後一個章節，我們來看看陣列 (Array) — 把一連串資料整齊地儲存在一個變數中。我們會看到為什麼它有用，然後探索如何創建一個陣列，對陣列內的項目進行檢索、新增、刪除……等操作。

測試一下
----

下面的任務會測試你對於前面提到的 JavaScript 基本概念是否了解。

傻故事產生器

本次測試中，你的任務是使用在這個單元所學到的知識，建立一個能隨機產生笑話的有趣程式。祝你愉快！

參考資源
----

Learn JavaScript

對於想成為網站開發者一個很好的資源，以互動的方式學習 JavaScript ，包含短課程、互動測驗，自動評估狀況給予指引。前 40 堂課是免費，完整的課程可以在一次付費買下。
使用 CSS 解決常見問題
=============

此頁總結問與答，以及 MDN 網站上其它能幫助你解決常見 CSS 問題的資源。

修飾盒子
----

如何為元素新增 Drop-Shadow？ (en-US)

陰影可以透過 `box-shadow` 屬性添加給盒子。這個教學解釋它如何運作並提供範例。

如何用圖片填滿盒子同時不讓該圖片變形？ (en-US)

`object-fit` (en-US) 屬性提供將圖片置入長寬比不同的盒子中的各種方式。你能在這個教學中了解如何利用它們。

什麼方法可以用來修飾盒子？ (en-US)

展示一系列用 CSS 修飾盒子時能派上用場的屬性。

如何把元素設為半透明？ (en-US)

`opacity` (en-US) 屬性及擁有 alpha 通道的顏色數值可以解決這個問題。

### 盒子修飾教學與指南

* 盒子模型 (en-US)
* 修飾背景與邊界 (en-US)
CSS 與文字
-------

如何為文字新增 Drop-Shadow？ (en-US)

陰影可以透過 `text-shadow` (en-US) 屬性添加給文字。這個教學解釋它如何運作並提供範例。

如何強調段落第一行？ (en-US)

了解如何透過偽元素 `::first-line` (en-US) 抓到段落第一行。

如何強調文章第一段？ (en-US)

了解如何透過偽類別 `::first-child` 抓到第一個段落。

如何僅強調出現在標題之後的第一段？ (en-US)

組合器能幫助你基於文件裡的位置精準抓取元素；這個教學解釋如何使用讓 CSS 僅套用於出現在標題之後的第一段。

### 文字修飾教學與指南

* 如何修飾文字？ (en-US)
* 如何修飾列表元素？ (en-US)
* 如何修飾超連結？ (en-US)
* CSS 選擇器 (en-US)
CSS 布局
------

如何置中項目？ (en-US)

在盒子裡將項目水平或垂直置中以前很麻煩，但現在彈性盒子讓它變得很簡單。

### 布局指南

* 使用 CSS 彈性盒子
* 使用 CSS 多行布局 (en-US)
* 使用 CSS 格線布局
* 使用 CSS 生成內容 (en-US)

**備註：** 我們有一本針對 CSS 布局解法 (en-US)的食譜，內有可正常執行的範例與常見布局任務說明。
CSS 排版
======

基於我們已經看過了 CSS 基本原理：如何將文字賦予樣式、如何該便樣式或操作你的文字內容所處的 box 模型。現在是時候看看如何將你的 box 模型在視圖中放置於相對應的正確位置。我們已經涵蓋了必要的先備知識，接下來我們可以深入 CSS 排版，看一些不同的顯示方式，如現代的排版方式——彈性盒子、CSS 網格及定位，當然還有一些舊式的技術你可能會想要理解。

先備知識
----

開始這個單元之前，需要做如下準備：

1. 對 HTML 有基本的認知，如 HTML 簡介 單元中所述。
2. 熟悉 CSS 基本原理，如 CSS 簡介中所述。
3. 了解如何 樣式框 (en-US)。

**備註：** 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 JSBin 或 Glitch 編輯並嘗試（大部分的）範例程式碼。

指導
--

這些文章旨在提供關於 CSS 中可用的技術以及基本排版工具和技術的指導。在課程的結尾有一個評估測驗——配置一個網頁的版面，這可以幫助你了解你對 CSS 排版方式的理解程度。

CSS 排版介紹 (en-US)

這篇文章將回顧一些之前單元中提過的 CSS 排版特性，像是不同的`display` (en-US) 參數，藉由這個單元我們將介紹一些基本概念。

常規流 (en-US)

在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。

彈性盒子 (en-US)

彈性盒子 (en-US)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。

網格 (en-US)

CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。

浮動 (en-US)

最初是為了在文字區塊中浮動排列圖片，而後為了在網頁中建造多攔排版`float` (en-US) 屬性成為了最常用的工具之一。這篇文章會解釋如何使用。

定位 (en-US)

定位准許將元素從正常的文檔流中脫離出來，讓他們表現不同，例如設置在另一個模塊的上方，或使模塊在瀏覽器視窗內部始終停留在相同的地方。這篇文章將解釋不同的`position` (en-US) 值和如何使用它們。

多欄排版 (en-US)

多欄排版規格提供你將內容排進欄位的排版方式，像你可能在報紙上看到的那樣。這篇文章會解釋如何使用這個功能。

舊式排版方式 (en-US)

網格系統是另一個在 CSS 排版中非常常用的特性，在網格排版出現之前，它通常使用浮動或其他佈局來實現。想像你的佈局為一組列數（如 4, 6, 或 12），然後將你的內容放置在這些虛構的列中。在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗 CSS 網格來結束-一個新興的瀏覽器特性使得在 Web 實現網格設計變得大為容易等來探索這些基本的想法。

支援舊版瀏覽器 (en-US)

在這個單元，我們建議你使用彈性盒子和網格作為主要的設計方式。但是有些造訪你網站的人會使用舊版瀏覽器，或者他使用的瀏覽器不支援你的設計方式。以下情形在網路上一定會發生——當新功能開發出來了，不同的瀏覽器會有不同的支援優先級。這篇文章會解釋如何使用現代網頁技術且不遺漏舊技術的使用者。

基礎排版理解測驗 (en-US)

配置網頁版面，這是一個測試你對於不同排版方式理解程度的測驗。

參見
--

實際的定位排版範例 (en-US)

這篇文章會告訴你如何建立一些真實的範例來說明什麼樣的情況你可以使用定位排版。
CSS 入門
======

CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來說，改變字體、顏色、尺寸以及擺放你的內容、拆分為多欄，或是添加動畫效果和其它裝飾的特性。這個單元提供一個平緩的學習路徑，透過介紹 CSS 的工作原理、語法的樣式，以及如何在 HTML 中添加樣式設定。

### 想要成為網頁前端開發員？

我們整理了一門課程，包含了你實現目標所需要的所有基本知識。

開始

先備知識
----

開始這個單元之前，你應該具備：

1. 基本熟悉電腦的操作，以及網路的使用（即：在網路查資料，看看內容）。
2. 設定好一個基本的工作環境（參考安裝基本軟體單元），並知道如何建立以及管檔案（參考檔案的管理單元）。
3. 對 HTML 有基本的認識，像是 HTML 介紹單元裡所提到的。

**備註：** 如果你使用的電腦／平板／或其它裝置上，無法建立你所需要的檔案。你可以在像是 JSBin 或 Glitch 的線上程式編輯平台上嘗試（絕大部分的）範例程式。

導覽
--

這個單元包含以下的主題，會帶你瀏覽所有 CSS 的基本理論，並提供你一些測試技巧的機會：

CSS 是什麼？

**CSS** （階層式樣式表）讓你能夠建立好看的網頁，但是它骨子是是怎麼運作的？這個主題用一個簡單的語法範例來解釋 CSS 是什麼，並涵蓋有關這個語言的一些關鍵術語。

開始使用 CSS

這個主題中，我們將把 CSS 套用到一個簡單的 HTML 文件上，逐步學習有關這個語言的一些實用知識。

CSS 的結構 (en-US)

現在你對 CSS 是什麼以及基本使用方法有了一些概念，是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念；如果之後你對任何概念感到模糊，可以到這裡來回顧。

CSS 的運作方式

我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。

使用你的新知識 (en-US)

透過你在前面堂課所學到的東西，你應該會發現你可以對簡單的文字內套用 CSS 設定，加入你想要的樣式。這個主題給你一個機會來做這件事。

參見
--

Intermediate Web Literacy 1: Intro to CSS

一個很好的 Mozilla 基礎課程，探討及測試許多 CSS 技巧。了解關於在網頁上設定 HTML 元素樣式、 CSS 選擇器、屬性、數值。