---
# System prepended metadata

title: 6/23 每日任務 Day13
tags: [2021 程式體驗營]

---

---
tags: 2021 程式體驗營
---

# 6/23 每日任務 Day13

## HTML 任務題目

今天練習在 codepen 上使用 SCSS 寫樣式：
1. 請同學按照教學影片 打開 codepen 新增一個 pen
2. 把 CSS 區塊的格式設置為 SCSS 
3. 在 CSS 區塊中練習添加三到五個變數
4. 將 codepen 連結貼至下方回報即完成

附上完成示意圖(變數部分同學可自行設計，圖片僅供參考)：
![](https://i.imgur.com/JxygLfM.png)


## JS 任務題目

請同學觀看 50 小時影音教學的 ***陣列教學*** 章節影片，學習完畢後回答下方問題：

1. 請分別寫出 pop、shift、push、unshift、splice 五種陣列操作方法用於實現哪些功能
2. 請同學以下方的陣列為基準撰寫程式碼，挑選上方的至少三種方式來實際運用看看
3. 請給自己撰寫出來的代碼加上備註 比如你這行做了什麼行為，在執行後 console.log(socialMedia) 的結果會是什麼
```javascript=
let socialMedia = ["LINE", "FB", "IG", "DCARD", "WeChat"]
// 方向參考：
// 1. 可以嘗試增加一個新的社群軟體在某個特定索引位置
// 2. 可以嘗試刪除某一個特定的社群軟體
// 3. 可以練習增加一個在最後方 接著使用刪除最後一個 刪掉剛才新增的
// 4. 可以練習一次增加多個或刪除多個
// 5. 以此類推自行延伸 ...
```

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

## 作業回報區
<!-- 
1. WangShuan - 答案:
ＨＴＭＬ：最上面就有完成示意圖了，你還想看什麼？美麗的我嗎？
ＪＳ：
第一題， pop 刪最後一個資料、shift 刪第一個資料、push 寫入新資料在陣列最後面、unshift 寫入新資料在第一個位置、splice 刪除指定位置開始算起的幾筆資料。
第二題跟第三題：
```javascript=
let socialMedia = ["LINE", "FB", "IG", "DCARD", "WeChat"];

socialMedia.push("Twitter") // 我要把 Twitter 加到 socialMedia 的最後方，我覺得結果會是 ["LINE", "FB", "IG", "DCARD", "WeChat", "Twitter"]
console.log(socialMedia) 

socialMedia.splice(3,2) // 我要從 DCARD 開始刪除兩個值，我覺得結果會是 ["LINE", "FB", "IG", "Twitter"]
console.log(socialMedia) 

socialMedia.shift() // 我要刪掉第一個 LINE ，我覺得結果會是 ["FB", "IG",  "Twitter"]
console.log(socialMedia)
```
 -->
 
 1. [drumrick - HTML & JS 作業](https://codepen.io/drumrick/pen/LYWowQY)
 2. [Hi Annie - HTML & JS作業](https://codepen.io/lhohdalu/pen/wvJLBjr?editors=1111)
 3. [Benson - HTML & JS作業](https://codepen.io/polarBear712/pen/GRWbgdr)
 4. [henry - HTML & JS作業](https://codepen.io/henrymorgan666/pen/RwpzNdK)
 5. [Natsu小夏 - HTML作業](https://codepen.io/natsunari/pen/QWpXbbZ?editors=0100)
 6. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/qBrzEgd)
 7. [Lina Chen - HTML & JS作業](https://codepen.io/LinaChen/pen/XWMLbmr)
 8. [BaoH - HTML & JS作業](https://codepen.io/baoh/pen/bGqPNPv)
 9. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/jOBjPMd)
 10. [Katie-HTML & JS作業](https://codepen.io/aria-mi/pen/eYvwNWY)
 11. [Yao Lin - HTML & JS作業](https://codepen.io/yaoyaoiii/pen/XWMLbxK)
 12. [Xing CT - HTML & JS作業](https://codepen.io/xing10/pen/GRWbJry?editors=1100)
 13. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/NWpZGgq)
 14. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/dyvBYZg?editors=1011)
 15. [雅琇 Alicia - HTML作業](https://codepen.io/yahsiu-hsu/pen/MWpMKZz)
 16. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/oNZrxGW)
 17. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/NWpZRXa)
 18. [Min - HTML作業](https://codepen.io/minnn7716/pen/BaWgpoe)
 19. [yu shiuan chang HTML & JS 作業](https://codepen.io/prankaChang/pen/YzZoZxX?editors=1111)
 20. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/LYWKENo)
 21. [Anne Lin - HTML & JS 作業](https://codepen.io/mmj159/pen/LYWKeEq)
 22. [Moto - HTML作業 & JS 作業](https://codepen.io/moto-san/pen/NWpZNgE?editors=0100)
 23. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/WNpqdyX)
 24. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/xxqojwQ?editors=0110)
 25. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/ExWBOVW)
 26. [我是明達 - HTML & JS 作業](https://codepen.io/bmzpfyxe/pen/dyvBwyr?editors=0010)
 27. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/JjWQqzE)
 28. [Sabrina](https://codepen.io/a120220ms25/pen/bGqPEdg)
 29. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
 30. [YOYO－HTML & JS 作業](https://codepen.io/lumedkle/pen/XWMvVPx?editors=1011)
 31. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/qBreYjL?editors=1011)
 32. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/mdWZEXY)
 33. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/mdmbZQj)
 34. [Kelvin-Wu - HTML & JS 作業](https://codepen.io/kai5363/pen/GRmRjeR)
 35. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/GRmgWqX?editors=0010)
 36. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/QWvjeNB?editors=1111)
 37. Shiny - [HTML & JS 作業](https://codepen.io/shinychen/pen/bGWwNde)
 38. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/PomEwWZ?editors=1111)