ALPHA CAMP全端工程師-學期二心得 2019.10.20

13 min readNov 1, 2019

Oct 20 · 12 min read

大家好，我是Alpha Camp學期二的同學。
本身是即將32歲想要挑戰轉職工程師的商科生，所以應該算是中年轉職 😂 😂 😂
寫這篇是因為本學期期末考有一項是要寫學習心得，不過也當作是寫給自己看的學期末複習流水帳吧。

若有似無的成就感

其實整體來說每次自己寫完作業還蠻有成就感的，但是看到其他強者同學每次寫的作業都超快又完美，又好像沒什麼成就感了，總之很矛盾的，哈哈哈

靠著薄弱的意志力學習下去

在詢問某些非常資深的工程師朋友，這年紀轉職工程師是否可行，多半得到的答案是不太好的，可是我覺得再拖下去想要一圓網頁工程師的夢可能就更難了，所以就把頭洗下去了…
到現在當然也還是每天在懷疑自己能不能轉職成功，不過還是靠著意志力撐著努力地學著。

如果有年齡相仿的朋友能一起取暖就好了Q”Q

感謝ALPHA CAMP有耐心的助教們

這裡的助教都很熱心，每次我的問題都很長，真心感謝助教們願意花時間看我的問題，還願意打一長串回覆給我，有時候來來回回會回覆很多次，也會給很多補充資料。

待加強弱項

上到目前為止深深覺得，自己CSS真的要再加強，因為後面幾乎都是在練JavaScript，畫面的排版幾乎都是先用bootstrap東拼西湊出來，所以有些CSS的東西都有點忘了，例如gird、flexbox之類的都還要找時間重新惡補一下。

這期間總共上了八週(課程內容很多，所以沒全部列出課程的東西，只列自己覺得是重要的部分，方便以後翻閱複習):

第一週:CSS切版應用

經歷了z-index、display: table達成水平垂直置中、加入.overlay用rgba: (0,0,0,0.5)讓圖片顏色加深、font-awsome加入icon、用float達成兩欄排版、 pseudo-element 的 ::after 來套用clearfix、 pseudo-class :hover滑鼠特效、CSS3 transition轉場、float三欄排版、:last-child 操作區塊內的最後一個元素、 position: relative和position: absolute 做出重疊效果、 background-attachment: fixed達到視差效果、box-shadow 圖片陰影、form表單結構、:nth-child()、outline控制表單外觀、使用瀏覽器的DevTools

跟著教案切出了一個個人網站
自己實作切出了一個個人履歷網站

第二週:JavaScript上手

認識了變數宣告let及const、資料型別、運算子們、陣列、物件、if else判斷式、while迴圈、for迴圈、函式function

實作項目:
1.舉報不恰當的圖片
2.簡易購物車
3.電腦猜數字

第三週:RWD與CSS佈局系統

1.觀念與工具
媒體查詢 Media Queries@media (max-width: 600px) {…//styles}、@import url(‘styles.css’) screen and (max-width: 670px)、 vw及vh及vmin及vmax 設定 viewport、運用min-width及max-width及min-height及 max-height限制元素的彈性。

2.RWD上手
Bootstrap

3.佈局系統(1)Flexbox
3–1.Flexbox佈局系統
display: flex啟用flexbox、 flex-direction 切換主軸線、 flex-wrap 屬性控制子元素 overflows、align-items及justify-content 屬性調整對齊和間距
3-2. 巢狀 Flexbox 與 Flex Item
flex-basis 和 flex-grow 來分配 item 的空間、order 來定義 item 在主軸線上的排列順序。

4.佈局系統(2)Grid
4–1.認識CSS grid
grid-template-columns 屬性指定 column 的數量和寬度、grid-template-rows 屬性指定row的數量和寬度、 grid-gap 屬性在格子之間加入間隔、grid-column: 1 / 4來控制每一個gird item要從第幾條格線到第幾條格線。
4-2.認識Bootstrap grid

實作項目:
1.Column Drop

2.手刻 Mostly Fluid

3.FlexBox綜合應用

4.CSS grid上手

5.Bootstrap grid實作

6.個人網站RWD版

第四週:DOM操作與事件

1.操作DOM元素

1–1.瀏覽器與 JavaScript
1–2.瀏覽器的 BOM 與 DOM
初步認識「全域物件」的觀念，並意識到 window 是全域物件、區分 element node、text node、attribute node。
1–3.DOM 節點的選取與查找
1–4.修改 DOM 節點
document.createElement 新增一個元素、NODE.innerHTML 修改元素內容、NODE.appendChild 將元素插入現有 DOM 結構中、NODE.classList 操作 CSS

2.打造動態網頁

熟悉 querySelector、createElement、innerHTML、appendChild的搭配使用、使用ES6 的 template literal 輸出動態樣板

3.事件驅動網頁狀態
addEventListener、運用 this 檢查發出事件的元素、運用 event.target 檢查觸發事件的元素、傳遞機制：Bubbling & Capturing。

4.表單事件
設置 submit、input、focus 、change等表單事件、使用 event.preventDefault() 關閉瀏覽器預設行為。

實作項目:

1.DOM操作上手-客製化名片模板

2.DOM操作上手-找出得分王

3.彩子的動態計分板

4.My Favorite Movies

5.My Todo List

6.客製化名片

第五週:重新認識JavaScript

1.重新認識資料型別
1–1.JavaScript 基本型別與奇怪的值

1–2.認識數字：進位制與浮點數
null 的使用情境、null與undefined的差異、哪些值在型別轉換時會變成 false、小心 JavaScript 的型別轉換問題。
1-3. 特殊數字與 Math 函式庫
NaN不是數字、Math.ceil()-小數點自動進位、Math.floor()-自動捨去小數點、Math.round()-四捨五入、Math.sqrt(64) - 開平方，會回傳 8、Math.abs(-4) - 絕對值，會回傳 4、Math.random()-取亂數，會回傳 0～1 (不包括 1) 的隨機數字、Math.pow(2, 3)-次方，這裡會回傳 2 的 3 次方，也就是 8
1-4.從字串擷取文字
slice()擷取句子、trim()移除空白、indexOf()辨識特定文字的位置、split()將字串切割成陣列

2.物件與函式
2–1.物件：一組完整的概念

2–2.認識物件操作方法
使用for in loop 來迭代陣列、使用 Object.keys、Object.values、Object.entries 等方法一口氣取得物件資訊
2–3.重新認識函式
區分參數 (parameter) 和引數 (argument) 的不同、用例子說明引數傳遞是 call by value
2–4.不同的函式寫法
具名函式 v.s. 匿名函式、箭頭函式
2-5.By Value v.s. By Reference
說明為什麼用 const 仍然可以改變物件的屬性內容
2-6.改寫流程控制
switch 改寫 if 陳述式。

實作項目:

1.週年慶摸彩活動
百貨公司在週年慶時推出了摸彩活動，一共有一獎、二獎、三獎，除了這三個獎項外，剩下的人都能得到參加獎。
每位客戶在結帳時可以得到一張摸彩彩券，每張彩券上有一組彩券號碼，彩券號碼必須是獨一無二的。
參加者在彩券填上聯絡資訊，並將彩券丟出摸彩箱；
到了開獎日，系統會從摸彩箱裡選出三名得獎者，並在官網上公布得獎名單（包括參加獎）。
在官網上公布的個人資料需要經過加密，加密方式為：

名字的總長度不變，顯示前兩個字母，剩下改成 *
email 顯示 @ 之後的資訊，@ 之前的資訊覆蓋掉一半，隱藏的部分一律用三個點 ... 取代，如果測試字串的長度是單數，例如 5，則只會留下 2 個字母

第六週:第三方API體驗

使用 axios 向第三方 API 請求資料、甚麼是非同步請求、Bootstrap的modal元件

實作項目:

女生清單

2.Adele的歌詞本

3.設計社群清單

第七週:用JavaScript刻功能

1.Search Bar
利用 Array 的 filter() 設定篩選條件、利用match()搭配正規表達式比對。

2.收藏我的最愛
運用localstorage.setItem()存入資料、localstorage.getItem()取出資料、localstorage.removeItem() 移除資料

3.Pagination
假設有個陣列資料裡有很多筆資料，想要依據不同頁碼拿出對應的資料，就利用slice去切割陣列中的某一段範圍，進而取出該頁碼應該呈現的那幾筆資料。

實作項目:
1.可變換顯示模式的電影清單

第八週:網站開發流程與工具入門+期末考

1.軟體開發流程
2.用指令列安裝 Git
終端機使用pwd、mkdir、ls、cd

3.Git & GitHub
git init、git status、git commit -m “說明文字”、git remote add origin [your github repo]、git remote -v、git push -u origin master

4.軟體測試簡介
4–1.在自己的電腦上安裝 Node.js 和 npm
4–2.安裝mocha & chai

npm-init // 完成後，專案目錄下會產生一個 npm 的資訊檔 package.json。
npm install mocha chai — save-dev // 會發現多了一個 node_modules 的資料夾

4–3.用Mocha寫測試
a.準備檔案

b.在 add_spec.js 寫入測試程式碼：

var should = chai.should()
describe('function add', function() {
  it('should add two number and return result', function() {
    var result = add(2, 1)
    result.should.be.equal(3)
  })
  it('string inputs should be illegal', function() {
    var result = add('2', '1')
    result.should.be.equal('something wrong!!')
  })
})

c.輸出測試報告test/index.html

<!DOCTYPE html>
  <html>
  
  <head>
    <title>Mocha Tests</title>
    <link rel="stylesheet" href="../node_modules/mocha/mocha.css">
  </head>
  
  <body>
    <div id="mocha"></div>
    <script src="../node_modules/mocha/mocha.js"></script>
    <script src="../node_modules/chai/chai.js"></script>
    <script>mocha.setup('bdd')</script>
  
    <!-- load code you want to test here -->
    <script src="../js/add.js"></script>
  
    <!-- load your test files here -->
    <script src="add_spec.js"></script>
  
    <script>
      mocha.run();
    </script>
  </body>
  
  </html>

實作項目:
1.將過去寫的作業傳到Github並且設定GitPage