0616
===

（二）WordpressCMS內容管理(術)李偉成

[HTML 基礎](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)

vscode 上淺藍色是屬性（attribute 記一下）　深藍是標籤
* id class title 很通用

* 重要
[HTML Element Reference](https://www.w3schools.com/tags/default.asp)
[CSS Reference](https://www.w3schools.com/cssref/default.asp)

* 翻譯外掛
[Google 翻譯](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)

[解析 CSS](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
* 選擇器（Selector） 之後 google 常需要查詢
* 屬性 (Properties) 之後 google 常需要查詢

* DOM 要知道 面試常考
全名為 Document Object Model 中文翻譯為 文件物件模型
樹狀結構

:::info
* 面試常考的題目
1.　什麼是 DOM？(HTML)
2.　要怎麼操作 DOM？
3.　如何修改 DOM 裡面的某個 Element 的 Class或其他屬性或內容？
4.　如何修改 DOM ，新增/移除一個新的節點（node）元素（element）
4.1 innerHTML vs createElement/appendChild
4.2 innerHTML vs. innerText vs. textContent
:::
document.getElementById() 與 document.querySelector() 差別？
document.querySelector() 與 document.querySelectorAll() 差別？

[[第七週] DOM - 操作 DOM 介面、事件監聽](https://yakimhsu.com/project/project_w7_DOM.html)
[都 2017 年了，學學用原生 JS 來操作 DOM 吧](https://jmln.tw/blog/2017-07-07-vanilla-javascript-dom-manipulation.html)
常用的修改 class 和屬性
getAttribute()、setAttribute() 和 removeAttribute () 效能問題
常用的修改 DOM

[文件物件模型 (DOM)](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model)
[Day03-深入理解網頁架構：DOM](https://ithelp.ithome.com.tw/articles/10202689)
老師推薦比較完整的 DOM 圖:point_down:
node -> 節點　　

[Day03-深入理解網頁架構：DOM](https://ithelp.ithome.com.tw/articles/10202689)
DOM 操作

document.getElementById('idName')

**常用 建議用下面:point_down:新的寫法**

document.querySelector('selector')
document.querySelectorAll('selector')

:point_up:上面兩個比較常用
有點像 [正規表達式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)

[JavaScript 初心者筆記: DOM - 如何用 JS 新增 HTML 內容](https://ithelp.ithome.com.tw/articles/10218607)
有 innerHTML vs. createElement 的比較（安全性與效能）--> XSS（cross-site scripting）跨站指令攻擊

老師提的進階用法 [繼承與原型鏈](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

[Element](https://developer.mozilla.org/zh-TW/docs/Web/API/Element)

[Node.textContent](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent)

[JavaScript 基礎](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

[API 是什麼? RESTful API 又是什麼?](https://medium.com/itsems-frontend/api-%E6%98%AF%E4%BB%80%E9%BA%BC-restful-api-%E5%8F%88%E6%98%AF%E4%BB%80%E9%BA%BC-a001a85ab638)

[使用說明 - 開發指南 - 中央氣象局](https://opendata.cwb.gov.tw/devManual/insrtuction)

[JSON Editor Online](https://jsoneditoronline.org/)
[如何在VSCode中格式化代碼自動排版快捷鍵](https://www.ucamc.com/e-learning/computer-skills/315-%E5%A6%82%E4%BD%95%E5%9C%A8vscode%E4%B8%AD%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A2%BC%E8%87%AA%E5%8A%A8%E6%8E%92%E7%89%88%E5%BF%AB%E6%8D%B7%E9%94%AE)

## API 識別方式
[AJAX](https://zh.wikipedia.org/zh-tw/AJAX)

[聯絡我們 - 全聯福利中心](http://www.pxmart.com.tw/px/customer_contact_us.px)
前端與後端溝通的重要方式（表單 form）
表單 from 會一次載入所有資料
AJAX 能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。

[[JS] 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) Medium 最近蠻流行了
專業找 MDN
[Day1 甚麼是Ajax? (part1)](https://ithelp.ithome.com.tw/articles/10200409)

[Web 開發者指引](https://developer.mozilla.org/zh-TW/docs/Web/Guide)

[AJAX與Fetch API](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html)

[Using Fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch)

[Mocky](https://designer.mocky.io/)
假的 WEB 服務 https://run.mocky.io/v3/9753aeb7-fa17-4ffd-a059-5c1a194a7aee

[API 到底是什麼？ 用白話文帶你認識](https://medium.com/codingbar/api-%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E9%BA%BC-%E7%94%A8%E7%99%BD%E8%A9%B1%E6%96%87%E5%B8%B6%E4%BD%A0%E8%AA%8D%E8%AD%98-95f65a9cfc33)

[API是什麼？認識 Web API、HTTP 和 JSON 資料交換格式](https://tw.alphacamp.co/blog/api-introduction-understand-web-api-http-json)

CRUD -> 後端會知道 建立Create 刪除Delete 查詢Read 修改Update

[axios](https://github.com/axios/axios)

[輕鬆理解 Ajax 與跨來源請求](https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/)
邀請程式界的大老協助

[PJCHENder那些沒告訴你的小細節](https://pjchender.blogspot.com/)
唯有自己整理過的東西，才是自己的

[[心得] 十年程式自學之路](https://huli.logdown.com/posts/703835)

## 常見 API 呼叫
http
有 $ 就是 jQuery

patch 補丁

* 網址的 ? 後面是參數 ＆ 去間格 KET=VALUE 格式

## 參考資料
[淺談 JavaScript 中的 Debug 神器 Console](https://hsiangfeng.github.io/javascript/20200313/3743352418/)

###### tags: `跨裝置企業平台與資料庫整合設計班`