Array

• splice()：可以藉由刪除既有元素並／或加入新元素來改變原陣列的內容，回傳值為被刪除的元素陣列。
• sort()：會原地對一個陣列的所有元素進行排序，並回傳此陣列。
• indexOf()：回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。
• lastIndexOf()：回傳給定元素於陣列中最後一個被找到之索引，若不存在於陣列中則回傳 -1。搜尋的方向為由陣列尾部向後（即向前）尋找，啟始於 fromIndex。
• includes()：判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。
• slice()：回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝。而原本的陣列將不會被修改。
• push()：添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。
• map()：建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。
• pop()：移除並回傳陣列的最後一個元素。此方法會改變陣列的長度。
• concat()：用來合併兩個或多個陣列。此方法不會改變現有的陣列，回傳一個包含呼叫者陣列本身的值，作為代替的是回傳一個新陣列。
• reverse()：原地反轉一個陣列。

大約一年前，我對前端、後端還一竅不通，轉眼間，一年過去了，報名Alpha Camp線上課程(以下簡稱AC)彷彿還是昨天的事。在這一段說長不長，說短不短的時間裡，雖說程度不算厲害，不過，我學到的東西還真不少~

起點

在現任公司任職硬體工程師幾年，雖然對於未來沒有什麼特別的刻劃，只是，往往在工作告一段落，但還沒到下班時間，所以東摸西摸找事做的時刻，心裡總浮現很多想法：這就是我未來的樣子嗎？這是我想要的生活嗎？好想回家，洗衣服都比耗時間好。

偶然看到這一篇文章： 想要在家工作 ？踏入遠距工作圈之前的5個準備，內心覺得無比心動，分析一下自身興趣，就這樣開始了我的進修之路。

至於進修管道的選擇，拿健身來比方，現在免費資源很多、取得容易，要自己練也是可以的，只是面對一個新領域，怎麼開始？學習的優先順序？學得對不對？全都需要你花時間成本。我個人傾向一開始先請健身教練帶領入門，待基礎觀念、基本功有了，之後自己練也比較有方向。

回到學習網頁，AC一條龍幫我包好好，學習內容、進度都不用擔心，我只管按部就班上課，一手滑就報名了，一不小心還學完了一整套XD

上班族的學習之路

趕進度

我不得不說...AC一週安排的學習量真的不少...！尤其我又是全職上班族，一定要每天都抽時間來消化，如果這一週偷懶了，緊接著下一週又有新內容，真的會趕不上進度。我必須老實說，自從上課後，越到後面的學期，我的熬夜量越多...。

另一面，也驚嘆原來1、2個月內可以學這麼多東西(AC一學期大約2個月)，每天都過得很充實，跟以往下班就滑手機、看影片相比，取而代之的是心裡的踏實感。回想過去自己學外語、或請同事教我C++，因為沒有進度壓力，最後總是不了了之。嗯...我果然需要有人盯。

擠時間

自從上課，時間總感到不夠用，那怎麼辦？只有一個字：擠啊！老實說如果只有每天下班後到睡前這段時間，還要扣除掉吃飯、洗澡、偶爾有別的事情...等等，所剩的時間真的不夠多。這時就要拿出平常滑手機的精神，有空閒時間就看一下教材，時程較長的時段就安排實做，然後來不及的時候，睡覺時間默默延後(淚

PS. 因為老覺得時間不夠用，我私下向其他同學請教時間管理，順便問了一下他們的作息，結果一堆人凌晨12、1點才睡，早上6、7起床。嗯....我的睡眠時間大約比他們多了3小時呢！頓時有種...什麼時間管理都是假的，晚睡才是真的...。

練習、練習再練習

因為大約一、兩個星期就會安排一個主題學習，比如第一週學習HTML與CSS，第二週學習JavaScript基本語法，第三週學習RWD...，這麼短的時間要達到熟悉該週主題，練習個3遍是基本。不過，我通常只來得及練習2遍，呵呵...。

成果

剛開始只做出簡單的靜態網站：CodePen

可以與使用者做互動了： Movie List

從去年3月報名AC的學期一，不知不覺已經快過了一年，迎來最後的畢業專案。從一開始的 "HTML是什麼？不知道。CSS？不知道。GitHub？那是什麼阿？" 到現在能與其他人共同協作出一個作品，而且...好像還滿有樣子的！？

不記錄一下，還不知道原來自己進步那麼多。

點我看作品：線上課程平台 GamiCo

專案發想

我們這組想要做電商平台，但同樣是電商平台，如何與別組作品有差異化，是我們考量的其中一個要素。我想到與組員之間的共同點就是都一同在AC學習，線上課程平台在過往作品也是比較少見的，因而提出自己的想法。沒想到他們聽了覺得不錯，很快就拍板定案了。

初步構想是：在這個課程平台，使用者可以作為學生角色-在平台上瀏覽、選購課程，同時也可作為開課者-在平台上上架自己的課程。但我們馬上遇到第一個問題：產品沒有亮點。

一個產品被開發出來，勢必有他試圖要解決的問題。而目前看來，我們的產品頂多只算是"復刻"了一個市面上現有的課程平台，並沒有自己的產品定位。思索市面線上課程平台遇到的問題，我們小組討論出三個痛點：

1、開課流程複雜

2、教學方式多為影片，其實並不適用所有課程類型

3、完課率低，獎勵機制無感

尤其最後一點，是普遍線上課程所面臨的難題，因此，我們決定針對完課率低這一點，以遊戲化為方向嘗試去解決。Gamico的雛型就這樣誕生了。

任務分配

在這次的專案中，我主要負責網站的畫面，包刮前期Wireframe的部分繪製，以及之後首頁、課程介紹頁面、上課頁面...等製作。為了讓專案看起來更專業，我採用了網路上的HTML 樣板為基礎，再客製化成專案想要的樣子。

而另外兩個夥伴：Sean、振銜主要負責資料庫(model)與功能(controller)的部分。

一般網頁元素的預設樣式幾乎不是 block 就是 inline，這兩個的特性如下：

block

元素會佔用父元素（或瀏覽器視窗）一整行的寬度，可以設定寬度和高度。

inline

會佔用顯示內容所需的空間，後面的元素會緊鄰在後。inline 元素的寬度和高度是由內容決定的，無法隨意控制。通常跟文字相關的元素多屬這種屬性。

那如果想要設定寬度和高度，又不希望元素佔用整個水平空間怎麼辦？這就需要第3種排列設定： Inline-block

Inline-block

元素作用類似 block 元素，你對它的尺寸有絕對的掌控權，但是它不會佔用整個水平空間，可以彼此相鄰。

設定方法只要變更display屬性即可

{
  display: inline-block;    
}

在 JavaScript 中，為變數命名時，需注意以下幾點：

• 可以使用錢符（$）、底線（_）與數字進行命名。如 $myBirthday 或 _myBirthday（但以小寫英文字母開頭仍是最標準的做法）
• 可以使用英文大、小寫命名不同變數。如 MyBirthday 與 myBirthday 會被視作不同變數
• 數字不能作為變數開頭。如 myBirthday1、myBirthday_1 或 _myBirthday 都沒問題，但 1myBirthday 就會產生錯誤。
• 變數名稱是兩個單字以上的組合時，需採用駝峰命名法 (camel case)。也就是將第一個單字之外的接下來每一個字首大寫，像 myBirthday 這樣的寫法。

加碼補充

CSS 的命名上，喜歡用 my-Birthday 這種寫法，稱為烤肉串命名法（kebab-case），這在 JavaScript 裡是不合法的方式。

假設先建立資料表drinks如下：

CREATE TABLE `drinks` (
  `id`    int(11)      unsigned NOT NULL AUTO_INCREMENT,
  `name`  varchar(20)           NOT NULL,
  `price` int(11)      unsigned NOT NULL,
  `cost`  int(11)      unsigned NOT NULL,
  PRIMARY KEY (`id`)
);

在資料表新增資料-INSERT

INSERT INTO `drinks` (`name`, `price`, `cost`)
VALUES ('阿華田', 65, 20);

*在 SQL 的語法中，有一些需要注意的地方：

1. 欄位名稱、表格名稱可以用反引號「`」包起來
2. 字串用單引號或雙引號包起來
3. 別忘了結尾的分號（;）
4. 指令一律大寫

查詢資料-SELECT

假設想要知道目前所有飲料的資料：

SELECT * FROM `drinks`;

*星號「*」在這裡代表的是「所有欄位」的意思。

假設店長只想要知道飲料名字以及對應的價格，那我們可以將指令改為：

SELECT `name`, `price` FROM `drinks`;

WHERE 指令在這裡同樣可以在這裡發揮作用，限制我們查詢的條件，例如說，我只想看愛玉冰茶的價格：

SELECT `name`, `price` FROM `drinks`
WHERE `name` = '愛玉冰茶';

修改已存在的資料-UPDATE

UPDATE `drinks`
SET `price` = 90
WHERE `name` = '冰咖啡';

* WHERE 會限制我們指令作用的對象。 就像在這個例子中，我們只希望修改冰咖啡的售價。 如果把 WHERE 拿掉，就會變成修改所有飲料的售價！

刪除已存在的資料-DELETE

DELETE FROM `drinks`
WHERE `name` = '阿華田';

* 加上 WHERE 可以限制我們需要刪除的資料，如果少了 WHERE ，則會將資料表裡所有的資料都砍光，所以在下指令的時候，要特別注意！

Bootstrap

我們可以透過靜態檔案的方式來載入 Bootstrap，把 Bootstrap 下載到本機。不過如果我們沒有客製化樣式的需要，也可以直接透過網址的方式來載入 Bootstrap，放置這些連結的位置可以在 Bootstrap 官網內的 Introduction — Quick start 找到。

FontAweomse

Font Awesome 這個網站提供許多圖示（ICON）讓開發者使用。部分圖示是免費的，有些則需要付費升級成 PRO 會員才能使用。

要使用 Font Awesome 有很多不同的方法，Font Awesone 也不斷更新他們的引入流程與政策。但是最簡單直接的方法之一，就是直接透過 CDN 連結引入。

程式碼引入位置

• 在 <head></head> 中載入 Bootstrap 的 CSS及Font Awesome 的 stylesheet
• 在 </body> 的前面載入 Bootstrap 需要使用到的 JavaScript

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>This is a test</title>  <!-- include bootstrap stylesheets -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">  <!-- include fontawesome stylesheets -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous"></head>
<body>   <!-- scripts for loading bootstrap related libraries -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script></body></html>

注意：在這裡載入 Bootstrap 或 FontAwesome 都是透過外部連結的方式載入。也就是說，這些檔案不是由我們所建立的伺服器透過靜態檔案的方式提供，因此若你在開發網頁的過程中處於離線狀態，可能會無法取得這些檔案。

handlebars 處理 {{{ }}} 跟 {{ }} 的差別

在 handlebars 樣板中呈現 JavaScript 資料時，可以使用 {{ }} 或 {{{ }}} 符號。

以下列程式碼為例

瀏覽器畫面