---
# System prepended metadata

title: '0615'
tags: [跨裝置企業平台與資料庫整合設計班]

---

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: `跨裝置企業平台與資料庫整合設計班`