0617
===

(三)WordpressCMS內容管理(術)李偉成

---

[從ES6開始的JavaScript學習生活](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/intro.html)

* Java Script 基本語法
* 決策、迴圈
* 物件、陣列
* 方法、函示

---

[字串](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String)
存取字元與比較　例如文字內是否有特定字

[陣列的運用](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8)

---

* DOM （書本第五章）
* 事件
* API、AJAX、JSON

---

* 監聽使用者

[Event reference](https://developer.mozilla.org/zh-CN/docs/Web/Events) 找簡中版有列出常用
表單事件 例如：送出前 檢查電話號碼

[建立或觸發事件](https://developer.mozilla.org/zh-TW/docs/Web/Guide/Events/Creating_and_triggering_events)

挑戰 JS 能力 [JavaScript 30 ](https://javascript30.com/)

[Swiper - The Most Modern Mobile Touch Slider](https://swiperjs.com/)

[什麼是 jQuery？前端框架盛行還需要JavaScript函式庫嗎？](https://tw.alphacamp.co/blog/jquery-javascript-library-overview)

## jQuery
* Selector
* AJAX
* API

## 學習比例
* 原生語法JS 60%
* js 框架 30％ - vue(推) or react
* jQuery 10%

* 快速產出作品 - vue
[Alex 宅幹嘛](https://www.youtube.com/user/achen224)

[jQuery CDN – Latest Stable Versions](https://code.jquery.com/)
jQuery - min 版 - 壓縮過 沒空格
jQuery - slim 版 - 閹割版（更小）
建議 min 版（安全）
[jQuery 实例](https://www.w3school.com.cn/jquery/jquery_examples.asp)

[cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!](https://cdnjs.com/)
[CDNJS － 使用 JavaScript CDN 來加速網站載入速度](https://free.com.tw/cdnjs/)

* 賦予值
＝
* 判斷
＝＝
＝＝＝ // 型別要一致

## 套件介紹
輪撥
[swiper](https://swiperjs.com/)
[Owl Carousel 2](https://owlcarousel2.github.io/OwlCarousel2/)

[Chart.js](https://www.chartjs.org/)
[Lightbox JS - Lokesh Dhakar](https://lokeshdhakar.com/projects/lightbox2/) 可能需要 jQuery

瀑布流
[Masonry](https://masonry.desandro.com/)
[muuri](https://muuri.dev/) 推

滑動動畫
[AOS - Animate on scroll library](https://michalsnik.github.io/aos/) 明天會教 很簡單
[alexfox lax.js](https://www.producthunt.com/posts/lax-js)
[lax.js](https://github.com/alexfoxy/lax.js)

視差滾動
[parallax.js - Matthew Wagerfield](https://matthew.wagerfield.com/parallax/)
離線安裝　npm i -s parallax-js

codepen 查 scrolltrigger
[ScrollTrigger - Plugins - GreenSock](https://greensock.com/scrolltrigger/)

學界 大數據 JS 繪圖
[Choropleth / D3 / Observable - ObservableHQ](https://observablehq.com/@d3/choropleth)

徵才管道
[f2etw](https://github.com/f2etw/jobs/issues)

## 作業
[行政院環境保護署。環境資源資料開放平臺 空氣品質指標(AQI)](https://opendata.epa.gov.tw/Data/Contents/AQI/)
AQI 用台灣地圖的方式表現
### 參考資料
[台灣天氣地圖-Vue.js與svg圖片應用](https://codepen.io/hsimao/pen/OjMeNv)
[SASS 转 CSS](https://www.dute.org/sass-to-css)
[taiwan svg map](https://codepen.io/hahamimidido/pen/wGRrza)

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