0615
===
(一)Bootstrapt 跨裝置網框架應用(術)伊君毅
---
## 複習 HTML + CSS + JS
參考 [從ES6開始的JavaScript學習生活](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/intro.html)
---
* 變數
ES5
var
ES6 (IE 不支援)
let
const
為了相容性少用這兩個指令
* 保留字
變數 [保留字](http://www.w3bai.com/zh-TW/js/js_reserved.html) var 等等
最簡單是都是單字
JS變數命名儘量不用單字並加上'-'或'_'
* 資料型態
資料型態區分
加上''就是字串
最基本的三型態 字串 數字 布林
[資料類型(值)](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/datatype.html)
null
undefined
Symbol
---
* 陣列
內容可以不同行別
```htmlmixed=
<script>
var array = [1, '2', true];
console.log(array);
</script>
```
---
* 函示
匿名函示
```javascript=
title.onclick(){ ... }
```
傳值
```javascript=
function
```
google 一下 js cheat sheet
有整理好的文件 例如：[JS CheatSheet](https://htmlcheatsheet.com/js/)
* if 判斷
```javascript=
if(true)//條件判斷式
{
}
else if(true)//多條件判斷式
{
}
else
{
}
```
* for 迴圈 指定執行某段程式碼重複執行
```javascript=
for(var i = 0; i < 10; ++i)
{
// 起點:i = 0 結束值:i < 10 增加值:++i
console.log(i);
}
```
無限迴圈解釋與說明
---
* 物件 鍵-值
```javascript=
var object = {
name: '某某某',
phone: 123456789,
skill: ['HTML', 'CSS', 'Java Script'],
address: {
country:'台灣',
city:'台中',
}
}
console.log('city: ' + object.address.city);
// console.log('skill' + object.skill);
object.skill.forEach(element => {
console.log('skill: ' + element);
});
console.log('name: ' + object.name);
```
'‵'重音符號 可以接受換行 ${變數} 替換文字內容
---
* API 串接
[中央氣象局開放資料平臺之資料擷取API - swagger](https://opendata.cwb.gov.tw/dist/opendata-swagger.html)
* 要申請授權碼
```bash=
curl -X GET "https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=申請授權碼&format=JSON&locationName=%E8%87%BA%E4%B8%AD%E5%B8%82&sort=time" -H "accept: application/json"
```
```javascript=
var utl = 'https://opendata.cwb.gov.tw/api/....';
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', utl, true)
request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
data.forEach(movie => {
// Log each movie's title
console.log(movie.title)
})
}
// Send request
request.send()
```
轉成 json 格式 [Json Parser Online](http://json.parser.online.fr/)
PS-其實 swagger 指定 json 格式就可以了 不需要 json parser
[隋棠作業 in codepen](https://codepen.io/chiisen/pen/qBbaPEP)
---
## 參考資料
[30個你必須記住的CSS選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
[CSS Diner](https://flukeout.github.io/)
練習過關
###### tags: `跨裝置企業平台與資料庫整合設計班`
Sign in with Wallet
Connect another wallet