# Lesson 4
## ＲＷＤ與Boostrap4 + SASS基礎
---
### Rundown
- 工程師日常
- 作業Review
- JS作業
- Bootstrap
- SASS/SCSS
- 切版作業
- 作業
---
## 工程師日常
---
入職以來聽過的笑話
### 「我們要把前端工作分出去，但我們沒有要做前後端分離」
---
### 什麼是前後端分離？
---
### 以前的網頁產生方式（沒分離的情況）
<img src="http://ithelp.ithome.com.tw/upload/images/20161227/20091346Py2cED8s53.png" width="600px">
<div style="font-size:32px">
後端產生HTML，
M**V**C=> 後端渲染ＳＳＲ(server side render)
</div>
---
### 這樣的前端工程師要做什麼？ e.g PHP、ASP
maybe 使用樣板語言＋使用SQL填入資料
```
<?php
$db = mysql_connect("localhost", "root", "password");
mysql_query("SET NAMES 'utf8'");
mysql_select_db($SERVER['db']);
?>
<html>
<?php
$sql="select * from news where Class='1' or Class='3' order by CTDate desc limit 0,5";
$result= mysql_query($sql);
while ( $arr=mysql_fetch_array($result) ) {
echo <<<NEWSEND
<div class="box">
<span class="box-title-1"> <b>【$arr[Title]】</b> $arr[CTDate] </span>
<div class="box-content">
$arr[Text]
</div>
</div>
NEWSEND;
}
?>
</html>
```
---
### 現在網頁可能的產生方式
<img src="http://ithelp.ithome.com.tw/upload/images/20161227/20091346IoKPoVChyF.png" width="600px">
<div style="font-size:32px">
<div >
後端：資料輸出
</div>
<div>
前端：ajax取得資料後，JavaScript 動態的把那些內容填到網頁上面
</div>
</div>
---
## 前後端分離
```
# 好處1：
server 有一天掛了，API 也跟著掛了，使用者依然可以造訪網頁，只是看不到資料，沒有分離的會連畫面都渲染不出來。
# 好處2：
前端專注於前端，專業分工
# 好處3:
前端可發揮的空間大，地位可能較高（不再是頁面仔了）
```
[參考資料](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/)
---
## 笑話2「要前後端分離，就是要用framework」
---
### 前後端分離 === 使用framework?
> 前後端分離是分工概念，
> 前端要用什麼達成並不綁定
>
---
### Framework === 網頁撰寫加速器
- bootstrap，CSS，快速建造網站畫面配置
- Ruby on Rails，Ruby，全端framework
- ReactJs，Javascript，前端framework
[參考資料](https://noootown.wordpress.com/2016/04/17/javascript-framework-explain-2/)
---
### 趨勢：因應網頁變成應用程式
### SPA: single page application
- 框架或工具=> 解決的問題而生
ex jQuery 解決了 DOM 操作的問題
- 分水嶺：2004 Gmail
- 前端不再是頁面仔＝>關注狀態。
---
### ReactJs Framework的一些好處
- 元件化：管理及再利用
- 處理更複雜的功能
- 縮短開發時間
[參考資料](https://kuro.tw/posts/2019/07/31/%E8%AB%87%E8%AB%87%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/)
---
## 結論：拒絕「剛愎自用」
若去當了PM或產品，不要自己為很懂啊
碰到這類的ＰＭ或產品，也有個心理準備...
```
你可以...
- 多問多請教
- 不要把別人當蠢蛋
```
---
## JS作業Review: 5 & 6
---
## Array == [一列按照**順序**排列]
---
## 5. Array
```
- 宣告
const myClass = ["html", "CSS", "JS"]
```
- 第一個東西是編號0
`myClass[0] `
---
- const || let 只管一層，對Array 沒辦法
- 常用Array 屬性及方法
```
myClass.lenth //屬性 沒有（）
// 用途
for (let i =0; i< myClass.lenth ; i++){
console.log(myClass[i])
}
```
---
## 5. Array（續）
- .push() .pop()
- .indexOf(): 找array有沒有那個值（ >-1)
- fn說明
- nest Array
```
const nestedArr = [[1], [2, 3]];
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2
```
---
### 6.loop
- for 以**固定數量**，作為控制條件
- while loop：以（**條件為true時**)，作為控制條件
- do...while : 少用
- 休止符break (switch 也有看過它喔)
---
- 雙迴圈
```
const myArray = [6, 19, 20];
const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
for (let j = 0; j < yourArray.length; j++) {
if (myArray[i] === yourArray[j]) {
console.log('Both loops
have the number: ' + yourArray[j])
}
}
};
```
---
# Bootstrap
RWD響應式佈局框架
用了就不再自己手刻
[參考資料](https://tw.alphacamp.co/blog/bootstrap-4-introduction)
----
### Bootstrap起手式
[引入ＣＳＳ及ＪＳ](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
```
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
```
----
### Bootstrap重點介紹(1)： 容器與RWD
1. [一切從container與斷點開始](https://getbootstrap.com/docs/4.5/layout/overview/#containers)：順便從bootstrap學習架構與命名[example](https://getbootstrap.com/docs/4.5/examples/grid/#containers)
2. [RWD斷點與@media query](https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints)
```
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
```
----
### Bootstrap重點介紹(2): 網格系統
- 全長12
- row & col
- [網格系統與ＲＷＤ](https://getbootstrap.com/docs/4.5/layout/grid/#responsive-classes)
- col: default row裡面含幾個就佔平均
- col-8: 佔8/12
- [col-md-4](https://getbootstrap.com/docs/4.5/layout/grid/#responsive-classes): 在md狀態下要是8格
> 還記得斷點嗎？
> md ＝＝＝ @media (min-width: 768px) { ... }
----
### 常用的component
- [麵包屑](https://getbootstrap.com/docs/4.5/components/breadcrumb/)
- [卡片](https://getbootstrap.com/docs/4.5/components/card/)
- [輪播](https://getbootstrap.com/docs/4.5/components/carousel/)
- [表單](https://getbootstrap.com/docs/4.5/components/forms/)
- [NavBar](https://getbootstrap.com/docs/4.5/components/navbar/): RWD直接做好了
---
### 綜合ＵＩ參考
https://getbootstrap.com/docs/4.5/examples/
---
## 有沒有想過
### 有了bootstrap還要前端做什麼？
---
- 熟練 -> 接案公司
https://themes.getbootstrap.com/preview/?theme_id=37702
- 用css刻出跟bootstrap一樣的東西＝>前端制霸
- 客製化需求
---
### 前端工具不只bootstrap
https://ant.design/components/button/
https://material-ui.com/zh/
---
### 手刻CSS要刻到什麼時候?
---
## 來點SASS/SCSS吧
<img src="https://miro.medium.com/max/1400/1*H-9KGBGNHfvkd4F4MOY__g.png" width="400px">
---
## SASS是什麼？
---
## SASS是一種CSS 預處理器
- 需要編譯成css瀏覽器才看得懂
- 主流三種： Sass/SCSS、Less、Stylus
- sass vs scss
- 新的SCSS ( Sassy CSS 、 Sass 3 ，檔案名稱為 *.scss )
- 舊的SASS（*.sass)
---
## 起手式
<div style="text-align:left ; font-size:32px">
1. 安裝
```
npm install -g sass
```
2. 自動監測
在資料夾開一個input.scss
並且執行指令：
```
sass --watch input.scss output.css
// 每次都要打開喔，才能即時呈現
```
3. html引入output.css
```
<link rel="stylesheet" href="./output.css" />
```
</div>
---
### SASS基礎
<div style="text-align:left ; font-size:32px">
1.支援變數 $ 2.巢狀結構 {}
```
$mycolor: #333
.rule {
color: $mycolor
#myID{
background: $mycolor
}
}
```
編譯結果
```
.rule {
color: #333;
}
.rule #myID{
background: $mycolor
}
```
[線上轉換器](http://beautifytools.com/sass-compiler.php)
</div>
---
### SASS選擇器
```
.container {
.className{
&.blue {} // &==父層
}
#id{
&:nth-child(2) // 第二個孩子（從1開始)
}
> div {} // 子層的所有div
.className.blue // 同時滿足兩名字
.className .blue // className 子層的blue
.className, .blue // className 和 blue
}
```
---
### Ｑ＆Ａ
---
### Thank You
---
{"metaMigratedAt":"2023-06-15T08:48:55.698Z","metaMigratedFrom":"YAML","title":"Lesson 4","breaks":true,"slideOptions":"{\"theme\":\"white\"}","contributors":"[{\"id\":\"75570e91-2c90-4c97-8261-0a2434a026a2\",\"add\":16462,\"del\":8605}]"}