# 前端大補帖

## HTML

## CSS

#### 定位

- [Sticky position](https://ithelp.ithome.com.tw/articles/10241079)

- [position 屬性的基礎概念](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/position-%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9F%BA%E7%A4%8E%E6%A6%82%E5%BF%B5-5931254e5203)
#### 進位制

- [從零開始學程式#5 進位制：二進位、八進位、十進位、十六進位⋯⋯
](https://www.youtube.com/watch?v=LdBS7sFOVWU)

#### RWD 相關

- [讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin](https://www.wfublog.com/2017/06/rwd-font-size-solution-vmin.html?m=1)

#### BootStrap

- [[BS] Bootstrap 4 自訂容器和欄間距寬度（Custom Container and Gutters Width）](https://pjchender.blogspot.com/2017/10/bs-bootstrap-4-custom-container-and.html)

## JavaScript

#### JS 相關影片

- [老師的 JS 清單](https://www.youtube.com/watch?v=ONDlsFXS27s&list=PLs1bkJhHMah13tQe1_zkUIaZvgHMOi3jZ)

#### 表達式與陳述式

- [Javascript 的表達式 (Expressions)和陳述式 (Statements)：一個用說的，一個用做的](https://medium.com/itsems-frontend/javascript-expressions-and-statements-7bd374effc95)

#### Argument 與 Parameters

- [理解 JS中的arguments 與 parameters](https://dean34520.medium.com/%E7%90%86%E8%A7%A3-javascript%E4%B8%AD%E7%9A%84arguments-%E8%88%87-parameters-5028336976f6)

#### 物件( Object )

- [物件取值、新增、刪除](https://ruienyuski.github.io/blog/2020/09/21/%E7%89%A9%E4%BB%B6%E5%8F%96%E5%80%BC%E3%80%81%E6%96%B0%E5%A2%9E%E3%80%81%E5%88%AA%E9%99%A4/)

#### 流程控制( For / If / while )

- [JS-for...in與for...of的差別](https://kanboo.github.io/2018/01/30/JS-for-of-forin/)

#### 閉包(Closure)
- [閉包包什麼？探索JS中的作用域與Closure](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/%E9%96%89%E5%8C%85%E5%8C%85%E4%BB%80%E9%BA%BC-%E6%8E%A2%E7%B4%A2js%E4%B8%AD%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E8%88%87closure-javascript%E9%8D%9B%E9%8D%8A%E6%97%A5%E8%A8%98-f7b1a2ac1e2a)

#### 陣列( Array )

- [Array 原型的 forEach 有多好用？ 學會高階函數之後都不想寫 JavaScript 以外的程式語言了](https://realdennis.medium.com/array-%E5%8E%9F%E5%9E%8B%E7%9A%84-foreach-%E6%9C%89%E5%A4%9A%E5%A5%BD%E7%94%A8-%E5%AD%B8%E6%9C%83%E9%AB%98%E9%9A%8E%E5%87%BD%E6%95%B8%E4%B9%8B%E5%BE%8C%E9%83%BD%E4%B8%8D%E6%83%B3%E5%AF%AB-javascript-%E4%BB%A5%E5%A4%96%E7%9A%84%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80%E4%BA%86-dc4b594a045a)

- [JavaScript Array 陣列操作方法大全 ( 含 ES6 )](https://www.oxxostudio.tw/articles/201908/js-array.html)

#### 淺層拷貝( Shallow Copy ) / 深層拷貝( Deep Copy )

- [JavaScript 核心篇 學習筆記: Chap.38 — 淺層複製及深層複製](https://medium.com/@yining1204/javascript-%E6%A0%B8%E5%BF%83%E7%AF%87-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-chap-38-%E6%B7%BA%E5%B1%A4%E8%A4%87%E8%A3%BD%E5%8F%8A%E6%B7%B1%E5%B1%A4%E8%A4%87%E8%A3%BD-c237fd383864)

- [JavaScript 淺拷貝 (Shallow Copy) 與深拷貝 (Deep Copy)
](https://awdr74100.github.io/2019-10-24-javascript-deepcopy/)

#### 傳值與參照( Value and Reference )

- [JS基本觀念：call by value 還是reference 又或是 sharing?](https://medium.com/@mengchiang000/js%E5%9F%BA%E6%9C%AC%E8%A7%80%E5%BF%B5-call-by-value-%E9%82%84%E6%98%AFreference-%E5%8F%88%E6%88%96%E6%98%AF-sharing-22a87ca478fc)

#### 事件觸發

- [[JavaScript] Javascript 中的 DOM 事件傳遞機制：捕獲與冒泡 (capturing and bubbling)](https://medium.com/itsems-frontend/javascript-event-bubbling-capturing-794cd2d01e61)

#### Regex 正規表達式

- [[Javascript] 初探Regex 正規表達式](https://moojing.medium.com/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795)

#### 物件導向

- [基礎JS物件導向教學（直播筆記）](https://creativecoding.in/2021/03/31/js%E7%89%A9%E4%BB%B6%E5%B0%8E%E5%90%91%E9%9A%A8%E6%84%8F%E5%AF%AB%E7%A8%8B%E5%BC%8F%E7%9B%B4%E6%92%AD%E7%AD%86%E8%A8%98/)

- [AJAX 筆記](https://medium.com/%E9%A6%AC%E6%A0%BC%E8%95%BE%E7%89%B9%E7%9A%84%E5%86%92%E9%9A%AA%E8%80%85%E6%97%A5%E8%AA%8C/js-ajax-%E7%AD%86%E8%A8%98-b9a57976fa60)

- [What’s THIS | 淺談Javascript中令人困擾的this](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/whats-this-%E6%B7%BA%E8%AB%87javascript%E4%B8%AD%E4%BB%A4%E4%BA%BA%E5%9B%B0%E6%93%BE%E7%9A%84this-abefb1d76a23)

- [你不可不知的原型鏈Prototype | JavaScript鍛鍊日記](https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84%E5%8E%9F%E5%9E%8B%E9%8F%88-prototype-b2473b301a11)

- [Javascript 是個真正的「物件」導向程式語言](https://medium.com/schaoss-blog/javascript-%E6%98%AF%E5%80%8B%E7%9C%9F%E6%AD%A3%E7%9A%84-%E7%89%A9%E4%BB%B6-%E5%B0%8E%E5%90%91%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80-bfefa55f272f)

- [JavaScript中的非同步處理機制 — Promise](https://medium.com/@yining1204/javascript%E4%B8%AD%E7%9A%84%E9%9D%9E%E5%90%8C%E6%AD%A5%E8%99%95%E7%90%86%E6%A9%9F%E5%88%B6-promise-9b7c87603e47)

- [JacaScript | Fetch 讓 ES6 擁有一對翅膀-基礎教學](https://medium.com/enjoy-life-enjoy-coding/jacascript-fetch-%E8%AE%93-es6-%E6%93%81%E6%9C%89%E4%B8%80%E5%B0%8D%E7%BF%85%E8%86%80-%E5%9F%BA%E7%A4%8E%E6%95%99%E5%AD%B8-2f98efe55ba4)

## PHP

#### 安裝

- [[開發工具] 使用 VS Code + XAMPP 進行 PHP 的開發與Debug](https://dotblogs.com.tw/ianchiu28/2017/06/15/180900)

- [DAY02-composer安裝教學](https://ithelp.ithome.com.tw/articles/10190770)

#### 變數

- [[PHP] 學習筆記-基本的變數型態
](https://medium.com/@a663321765/php-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E5%9F%BA%E6%9C%AC%E7%9A%84%E8%AE%8A%E6%95%B8%E5%9E%8B%E6%85%8B-17979ff7dc34)

#### 傳遞參數

- [【PHP】12. 取得HTML傳遞參數
](https://progressbar.tw/posts/168)

- [[JS] 使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）](https://pjchender.blogspot.com/2018/08/js-javascript-url-parameters.html)

#### HTTP 協定

- [Rails - 從headers到cookie、session](https://weilihmen.medium.com/rails-%E5%BE%9Eheaders%E5%88%B0cookie-session-9f1909bf39b0)

#### GET and POST
- [淺談 HTTP Method：表單中的 GET 與 POST 有什麼差別？
](https://blog.toright.com/posts/1203/%E6%B7%BA%E8%AB%87-http-method%EF%BC%9A%E8%A1%A8%E5%96%AE%E4%B8%AD%E7%9A%84-get-%E8%88%87-post-%E6%9C%89%E4%BB%80%E9%BA%BC%E5%B7%AE%E5%88%A5%EF%BC%9F.html)

- [http Post 和 Get 差異](https://totoroliu.medium.com/http-post-%E5%92%8C-get-%E5%B7%AE%E7%95%B0-928829d29914)

#### include and require

- [PHP中include與require使用方法區別詳解](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/236870/)

#### Cookie 與 Session

- [[JavaScript] Cookie、LocalStorage、SessionStorage 差異](https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f)

#### PDO( PHP Data Objects )

- [PHP Data Objects (PDO) 簡易使用說明(1)-啟用PDO讀取資料庫資料](https://pjchender.blogspot.com/2015/08/php-data-objects-pdo.html)

#### 其他

- [為什麼要使用 rel="noreferrer noopener"，談 target="_blank" 的安全性風險](https://pjchender.blogspot.com/2020/05/relnoreferrer-targetblank.html)
## 資料安全

- [身為 Web 工程師，你一定要知道的幾個 Web 資訊安全議題](https://medium.com/starbugs/%E8%BA%AB%E7%82%BA-web-%E5%B7%A5%E7%A8%8B%E5%B8%AB-%E4%BD%A0%E4%B8%80%E5%AE%9A%E8%A6%81%E7%9F%A5%E9%81%93%E7%9A%84%E5%B9%BE%E5%80%8B-web-%E8%B3%87%E8%A8%8A%E5%AE%89%E5%85%A8%E8%AD%B0%E9%A1%8C-29b8a4af6e13)

###### tags: `MFEE 自學補充資料`