# Front-end Engineer ## 在做什麼 ### ver.面向無程式基礎者 --- # Engineer --- ### 什麼是工程師 > 工程師是指那些在工程專業領域的人，他們使用科學知識來駕馭技術以解決實際問題，並以此為職業。 > > 科學家探索世界以發現普遍法則，但工程師使用普遍法則以設計實際物品。 #### by [wiki](https://zh.wikipedia.org/wiki/%E5%B7%A5%E7%A8%8B%E5%B8%88) ---- ### 什麼是工程師(續) - 工程師 - 硬體工程師 - 軟體工程師 - 韌體工程師 - 資料庫工程師 - 系統工程師 - APP工程師 - 遊戲工程師 - 網站工程師 - 前端工程師 <- We're here - 後端工程師 - ... --- ### 本科系 V.S. 非本科系 #### 本科系在四年學了什麼 - 計算機概論、程式設計、資料結構、資料庫、演算法、計算機結構、計算機網路、作業系統... - 實際應用：專題研究、企業實習、外包接案 ###### 計算機20世紀才被做出來，發展到個人電腦(PC)也不過1990的事，學術界重在介紹這些發展，以及為什麼變成現在的架構 #### by [wiki](https://zh.wikipedia.org/zh-tw/%E7%94%B5%E5%AD%90%E8%AE%A1%E7%AE%97%E6%9C%BA) ---- ### 本科系 V.S. 非本科系(續) - 不要被科系限制了自己的想像，許多軟體工程師都是從下班後的興趣開始的 - 自製APP📱 - 自製遊戲🕹 - Side Project👊 - 協助open source👼 - 進入職場後，就算是本科系出身新人、其他領域的資深，也是需要重學公司目前使用的架構、邏輯 --- ### 程式基礎-名詞 ###### 可使用[codepen](https://codepen.io/)，可以不架設環境做線上練習 ###### 有興趣可以繼續看電子書[從ES6開始的JavaScript學習生活](https://eyesofkids.gitbooks.io/javascript-start-from-es6/) --- #### 變數 variable 來自數學，回想一下一元二次方程式 y = 3x^2^ 此處y、x即為變數，他們可以由其他人決定 ---- #### 變數 variable(續) ```javascript let a = 123 let b = a + 100 // 改變a的值 a = 456 // 印出文字 console.log('a=', a) console.log('b=', b) ``` 執行結果: ``` a=456 b=223 ``` ---- #### 常數 constant 來自數學，回想一下算圓面積 面積 = 半徑^2^ * 圓周率 此處圓周率=3.141592...，這數值定義後是不會變的 ---- #### 常數 constant(續) ```javascript // 圓周率 const PI = 3.14 // a圓半徑 let a = 1 // b圓半徑 let b = 2 // 印出文字 console.log('a圓面積=', a*a*PI) console.log('b圓面積=', b*b*PI) ``` 執行結果: ``` a圓面積=3.14 a圓面積=12.56 ``` ---- #### 資料類型 Data type "100" 與 100 相等嗎？ 在大部分的程式語言中，需要宣告變數/常數的類型 但就算不宣告，資料類型還是存在的 ```javascript= // 布林 只有真/假 let boo = true // 數字 可作加減乘除 let num = 1 // 字串 存放「字」 let str = '1' // 陣列 可存放多個資料 let arr = [1, 2, 3, 4, 5] ``` ---- #### 資料類型 Data type(續) 為什麼要有資料類型？ > 各有特殊作用、適合的場景，需要被嚴格定義/區別 --- ### 程式基礎-流程控制 ---- #### 區塊 程式中通常以{}表示區塊 ```javascript= // 區塊A { let a = 1 console.log(a) } // 區塊B { let a = 100 console.log(a) } ``` 輸出結果 ``` 1 100 ``` 不同區塊可以有同樣的變數，並且區塊互不干擾 ---- #### if...else... 若符合if的條件判斷，則會執行if內的區塊，反之執行else(選填) ```javascript= let a = 100 if (a === 100) { console.log('a等於100') } else { console.log('a不等於100') } ``` 輸出結果 ``` a等於100 ``` ---- #### 邏輯運算 ##### == equal 檢查是否相等 ```javascript= let a = 100 if (a === 100) { console.log('a等於100') // 印出這句 } else { console.log('a不等於100') } ``` ##### ! not 將結果反向 ```javascript= let a = 100 if (!(a === 100) { console.log('a等於100') } else { console.log('a不等於100') // 印出這句 } ``` ---- ##### && and 檢查前後是否都為true ```javascript= let a = 1 console.log((a === 1) && (a !== 0)) // true console.log((a === 1) && (a === 0)) // false ``` ##### || or 檢查前後是否有一者為true ```javascript= let a = 1 console.log((a === 1) || (a !== 0)) // true console.log((a === 1) || (a === 0)) // true ``` ---- ##### switch...case... 依據switch帶入的變數，執行不同case ```javascript= switch (x) { case 1: // 當x是1執行這裡 break case 2: // 當x是2執行這裡 break case 3: case 4: case 5: // 當x是3或4或5執行這裡 break default: // 其他情況執行這裡 break } ``` --- ### 程式基礎-迴圈 ---- 當我們要重複做一樣的事時，需要使用迴圈 #### while迴圈 達成某個條件，就繼續做 ```javascript= let a = 100 // 當a不等於0就不斷執行下去 while (a !== 0) { // 每執行一次 a 會-1 a = a - 1 } ``` ---- #### for、for each迴圈 使用某個變數/陣列為控制條件 ```javascript= // 此時陣列就派上用場了 let arr = [1, 2, 3, 4] arr.forEach((x => { //每次會帶入陣列的一個值 並命名為x console.log(x) })) ``` 輸出結果 ``` 1 2 3 4 ``` --- ### 程式基礎-函式 ---- 前面舉過算圓面積的例子，但當一段程式需要算很多種圓面積呢？該怎麼做？ 例如現在需要(半徑=1圓面積)+(半徑=2圓面積)+(半徑=3圓面積) ```javascript= const PI = 3.14 let 1_circle_area = 1 * 1 * PI let 2_circle_area = 2 * 2 * PI let 3_circle_area = 3 * 3 * PI let result = 1_circle_area + 2_circle_area + 3_circle_area ``` ---- #### 函式(function) 帶入不同的參數，而得到不同結果 ```javascript= function circle_area (radius) { const PI = 3.14 let result = radius*radius*PI return result } let result = circle_area(1) + circle_area(2) + circle_area(3) ``` --- 如果以上都了解了 恭喜你踏入工程師思維的第一步 --- ### 網站的基本架構-前端 後端 ---- #### 以餐廳為例子  ---- #### 前端(通常)負責畫面的呈現 - html: 組出網頁的骨架 - css: 為骨架做出肌膚與皮 - javascript: 做出事件&行為 ---- #### 後端(通常)負責資料處理 - api: 提供接口讓前端呼叫，及回傳結果 - 後端語言: 處理拿到資料的邏輯 - DB: 儲存資料 ---- 下次再做更深入的介紹囉（ ゜ρ゜)ノ --- Q & A