---
tags: 2021 程式體驗營
---
# 6/28 每日任務 Day16
## HTML 任務題目
請根據下方 SCSS 格式代碼回答問題(這段的知識點超重要請學起來)：
```
<!-- 假設這段代碼都是 all.scss 檔案的內容 -->
@import "_reset.scss"
@import "_variable.scss"
@import "_main.scss"
.header {
background-color: yellow;
display:flex;
align-items: center;
&-logo {
width: 100px;
}
}
```
### 第一題
以上代碼的格式是否有問題？如果有應該如何修正？
### 第二題
以上引入的順序是否有問題？如果有應該如何修正？
### 第三題
all.scss 中的 .header 那段樣式會不會執行，建不建議這樣做，為什麼？
### 第四題
新增 scss 檔案時，在檔案名稱前方加上 `_` 的作用是什麼？加與不加有什麼差別嗎？
## JS 任務題目
今天要練習一下 JSON 這個小東西，理解該如何結合物件跟陣列來使用 JSON 格式的資料。
### 題目範例
首先我有一筆 JSON 格式的資料如下：
```javascript=
const data = {
"squadName" : "Super hero squad",
"homeTown" : "Metro City",
"formed" : 2016,
"active" : true,
"members" : [
{
"name" : "Molecule Man",
"secretBase" : "SuperTower",
"powers" : [
"Radiation resistance",
"Turning tiny",
]
},
{
"name" : "Madame Uppercut",
"secretBase" : "SuperTower",
"powers" : [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name" : "Eternal Flame",
"secretBase" : "MarsTower",
"powers" : [
"Immortality",
"Teleportation",
"Interdimensional travel"
]
}
]
};
```
然後我要建立一個物件 obj
obj 的屬性是 secretBase 的值(即要以 SuperTower 跟 MarsTower 當作 obj 的屬性名稱)
obj 中的屬性值為 members 中所對應的物件資料
此時撰寫的代碼就會是這樣：
```javascript=
let obj = {}; // 建立空物件
obj[data.members[0].secretBase] = [data.members[0],data.members[1]]; // 設置物件屬性與屬性的值
obj[data.members[2].secretBase] = [data.members[2]]; // 設置物件屬性與屬性的值
console.log(obj) // 確認是否獲取成功
```
### 同學要練習的題目
首先我們有一筆 JSON 格式的資料如下：
```javascript=
const data = {
contentType: "application/json; charset=utf-8",
isImage: false,
data: {
RtnCode: "00",
DoctorInfo: [
{
DoctorName: "黃裕民",
DeptCode: "06",
DtTitle: "主治醫師",
Exper: "高雄市立聯合醫院骨科主治醫師、高雄醫學大學附設醫院骨科部住院醫師、高雄醫學大學附設醫院骨科部總住院醫師、振興復健醫學中心骨科部住院醫師、和信治癌中心醫院外科住院醫師、德國基爾大學(CAU Kiel)醫學系",
License: "手外科專科醫師",
Special: "人工關節置換、骨折創傷、一般骨科、退化性關節炎、手外科"
},
{
DoctorName: "侯郁芹",
DeptCode: "40",
DtTitle: "牙醫師",
Exper: "兒童牙科專科醫師、身心障礙者(特殊需求者)牙科專科醫師",
License: "無資料",
Special: "兒童牙科、身心障礙者牙科(特殊需求者牙科)、一般牙科"
},
{
DoctorName: "蕭慶隆",
DeptCode: "06",
DtTitle: "特約醫師",
Exper: "高雄市立大同醫院骨科醫師、國防醫學院醫學士",
License: "骨科專科醫師",
Special: "一般骨科、膝關節內視鏡手"
},
{
DoctorName: "鄭富榮",
DeptCode: "20",
DtTitle: "主治醫師",
Exper: "高雄市立聯合醫院腎臟科主治醫師、中國醫學院醫學士中國醫學院醫學士",
License: "內科醫學會專科醫師、腎臟科醫學會專科醫師",
Special: "腎臟及泌尿系統感染、急性腎衰竭及慢性腎臟病、血尿與蛋白尿、血液透析及腹膜透析、電解質不平衡、糖尿病"
},
{
DoctorName: "陳信宏",
DeptCode: "20",
DtTitle: "主治醫師",
Exper: "高雄市立聯合醫院心臟內科主治醫師教育部部定講師高雄醫學大學理學碩士、高雄醫學院醫學士",
License: "內科專科醫師證書、中華民國心臟學會專科醫師證書、中華民國心臟學會心臟血管介入專科醫師證書、重症專科醫師證書",
Special: "冠狀動脈心導管診斷與血管支架介入治療、心臟節律器植入手術、心臟超音波檢查、高血壓、血脂異常、冠狀動脈疾病、狹心症、心肌梗塞、心臟衰竭症候群、心律不整、心臟內科學、一般內科學"
},
{
DoctorName: "朱宜生",
DeptCode: "06",
DtTitle: "特約醫師",
Exper: "國防醫學院醫學士、前國軍八二總醫院骨科主任、高雄市立大同醫院骨科醫師",
License: "骨科專科醫師",
Special: "一般骨科、創傷骨折、關節重建手術"
}
]
},
id: "1b7002fa-479d-4d8f-bbc6-754ec692e88e",
success: true
};
```
接下來請同學使用上方 data 資料**先建立一個物件為 obj**，
obj 的屬性分別為資料中 **DtTitle 的值** (即要以主治醫師、牙醫師、特約醫師這三個當做 obj 的屬性名稱)
**obj 中屬性的值** 為 **DoctorInfo 中對應的醫生種類資料**，
最終 console.log(obj) 會得到以下結果：
```javascript=
{主治醫師: Array(3), 牙醫師: Array(1), 特約醫師: Array(2)}
```
補充：
1. 在新增 obj 屬性時 需使用獲取資料方法來實現 禁止直接通過手打填入 主治醫師、牙醫師、特約醫師 等文字
2. 在設置 obj 屬性值時 需通過獲取陣列中對應索引值的物件來實現
3. 上面兩點看不懂的可以看一下題目範例的部分是如何實作的
## 回報流程
1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）
## 作業回報區
<!--
1. WangShuan - 答案:
ＨＴＭＬ：
第一題
以上代碼的格式是否有問題 如果有應該如何修正
答：有問題，下底線跟 .scss 可省略 且需有 ; 結尾
第二題
以上引入的順序是否有問題 如果有應該如何修正
答：有問題，應該最先引入變數，接下來清空預設樣式，最後才是 main
（這部分假設 reset 沒用到變數的東西，你們要說先放 reset 也是可以啦）
第三題
all.scss 中的 .header 那段樣式會不會執行，建不建議這樣做，為什麼？
答：會，不建議這樣做，因為 all.scss 裡面通常只會寫引入檔案，不會寫樣式代碼
第四題
下底線是用來告知該檔案為加載使用，不需被編譯軟體編譯成獨立的 css 檔，加上下底線就不會被編譯，檔名前面沒有下底線就會生成對應的 css 檔案
ＪＳ：
```javascript=
const kind1 = data.data.DoctorInfo[0].DtTitle;
const kind2 = data.data.DoctorInfo[1].DtTitle;
const kind3 = data.data.DoctorInfo[2].DtTitle;
const obj = {};
obj[kind1] = [data.data.DoctorInfo[0], data.data.DoctorInfo[3], data.data.DoctorInfo[4]]
obj[kind2] = [data.data.DoctorInfo[1]]
obj[kind3] = [data.data.DoctorInfo[2], data.data.DoctorInfo[5]]
console.log(obj);
```
-->
1. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/GRmKaKp)
2. [明達在這 - HTML 作業](https://codepen.io/bmzpfyxe/pen/GRmKayN)
3. [Katie - HTML & JS作業](https://codepen.io/aria-mi/pen/XWRrwqQ)
4. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/qBmWGJd)
5. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/vYmBwrX?editors=0011)
6. [Yao Lin - HTML & JS 作業](https://codepen.io/yaoyaoiii/pen/qBmWzdN)
7. [Natsu小夏- HTML作業](https://codepen.io/natsunari/pen/RwVbzxQ)
8. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/OJmLeXZ)
9. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/ExmYByV)
10. [Xing - HTML & JS 作業](https://codepen.io/xing10/pen/jOmNjwR?editors=1112)
11. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/wvdwLPQ)
12. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/OJmLKoV)
13. [David-HTML&JS 作業](https://codepen.io/dotsea/pen/RwVbzOB)
14. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/bGWGGRQ)
15. [ZY Hsu- HTML & JS 作業](https://codepen.io/zihyin/pen/oNWNvdX?editors=1010)
16. [Sabrina](https://codepen.io/a120220ms25/pen/jOmOEZM?editors=1111)
17. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/ZEKEQry)
18. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/eYWYmby)
19. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/NWjWNBX)
20. [yu shiuan chang HTML & JS 作業](https://codepen.io/prankaChang/pen/gOWOgRe?editors=0112)
21. [Anne Lin- HTML & JS 作業](https://codepen.io/mmj159/pen/abWbBQe)
22. [Kelvin Wu - HTML & JS 作業](https://codepen.io/kai5363/pen/qBmBRJm)
23. [Tommy - HTML作業](https://codepen.io/tommy168/pen/qBmBrpK)
24. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
25. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/JjNjvdy?editors=1011)
26. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/bGWGKOY)
27. [Min - HTML作業](https://codepen.io/minnn7716/pen/GRmRPLV?editors=1000)
28. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/RwVwXvO)
29. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/MWmayxE?editors=0010)
30. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/bGWpwVr?editors=1011)
31. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/MWoYmGM?editors=1111)
Sign in with Wallet
Connect another wallet