<style>
.slides img{background-color:grey!important}
.slides img[title^='"']{filter:invert(100%)}
hr, .slides [title^='*']{display:none}
summary h1{display:inline;border-bottom:0!important}
</style>
<!-- .slide: data-background="black" -->
###### [JavaScript 教學/](/@NCHUIT/js)
:::spoiler {state=open}<h1>資料型態</h1>
+ <i class="fa fa-book"></i> 網頁 md.nchuit.cc/js
+ <i class="fa fa-tv"></i> 簡報 md.nchuit.cc/js1-1
[ToC]
:::
> [name=VJ]
----
## 猜猜我是誰 `typeof()`
查看型態
----
## 字串 `string`
一段文字。如果要將字串指定給一個變數，您應該將內容用引號給框起來。
```javascript
var x = 'Bob'
```
----
### 拼接字串
你可以使用 `+` 號來拼接字串。試著輸入以下幾行程式，每次一行：
```javascript=
var name = 'Bingo'
name
var hello = ' says hello!'
hello
var greeting = name + hello
greeting
```
----
### [格式化字串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Text_formatting)
字串要用下面的符號來直接宣告
單引號 `''`
雙引號 `""`
重音符 <code>``</code>
----
#### 單雙引號
單雙引號可以混用，但頭尾要對應
如果同為單引號或雙引號需要用反斜線`\`
```javascript=[|1,2,3,4]
alert('我就是要印出 " ')
alert('我就是要印出 \' ')
alert("我就是要印出 ' ")
alert("我就是要印出 \" ")
```
##### 換行用`\n`
----
重音符可以讓你在字串中換行
```javascript=
字串 = `第一行
第二行`
```
也可以[格式化輸出](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals)
```javascript=[|1,2,3,4]
身高cm = 165
溫度C = 30
alert(`你的身高是${身高cm/2.54}英吋，
${溫度C}℃=${(溫度C*9/5)+32}℉`)
```
---
## [函式 `function`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Functions)
###### 也是物件
```javascript=
函式 = function(){
console.log("訊息")
}
```
### 另一種寫法
```javascript=
function 函式(){
console.log("訊息")
}
```
----
### 用處?
用於**呼叫**，簡化程式
```javascript=
函式 = function(){
console.log("睡覺")
console.log("念書")
console.log("玩遊戲")
}
函式()
函式()
```
----
## [數值 Number](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number)
一個數字。數字不被引號框起來。
```javascript
var x = 10
```
----
### 運算
JavaScript 運算子可以讓我們執行比較、數學運算、連接字符串等。
----
首先讓我們看看以下的算數運算子：
|運算子|名稱|範例|答
|-:|-|-|-
|`+` |加法|`8 + 9`|`17`<!-- .element: class="fragment" data-fragment-index="1" -->
|`-` |減法|`7 - 1`|`6`<!-- .element: class="fragment" data-fragment-index="2" -->
|`*` |乘法|`3 * 7`|`21`<!-- .element: class="fragment" data-fragment-index="3" -->
|`/` |除法|`2 / 3`|`0.66...`<!-- .element: class="fragment" data-fragment-index="4" -->
|`**`|乘方|`2 ** 11`|`2048`<!-- .element: class="fragment" data-fragment-index="5" -->
----
### 賦值運算
如果你只是簡單想將兩個字串加在一起，你可以這樣做：
```javascript
name += ' says hello!'
```
<p>相當於</p>
```javascript
name = name + ' says hello!'
```
----
通常流程處理才用得上，下面假設每次執行前都宣告
```javascript=
x=20; y=4
```
----
|賦值運算|範例|等義於
|-|-|-
|`=`|`x = y`|`x = y`
|`+=`|`x += y`|`x = x + y`
|`-=`|`x -= y`|`x = x - y`
|`*=`|`x *= y`|`x = x * y`
|`**=`|`x **= y`|`x = x ** y`
|`/=`|`x /= y`|`x = x / y`
|`%=`|`x %= y`|`x = x % y`
----
2進制處理賦值運算
|賦值運算|範例|等義於
|-|-|-
|`<<=`|`x <<= y`|`x = x << y`
|`>>=`|`x >>= y`|`x = x >> y`
|`>>>=`|`x >>>=`|`y x = x >>> y`
|`&=`|`x &= y`|`x = x & y`
|`^=`|`x ^= y`|`x = x ^ y`
|`\|=`|`x \|= y`|`x = x \| y`
---
## [布林值 Boolean](https://www.w3schools.com/js/js_booleans.asp)
一個 True（真）/False（假）數值。`true`/`false` 是 JavaScript 關鍵字，不需要用引號框住。
```javascript
var x = true
```
----
### 邏輯運算
|運算子|名稱|範例|答
|-:|-|-|-
|`&&`|且|`x < 10 && y > 1`|`true`<!-- .element: class="fragment" data-fragment-index="1" -->
|`\|\|`|或|`x == 5 \|\| y == 5`|`false`<!-- .element: class="fragment" data-fragment-index="2" -->
|`!`|非|`!(x == y)`|`true`<!-- .element: class="fragment" data-fragment-index="3" -->
[👉運算式與運算子-MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)
請學會區分 [宣告](https://www.w3schools.com/js/js_assignment.asp) 和 [比較](#比較運算)
----
[](https://store.line.me/stickershop/product/7034336)
#### [in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in)
----
### 比較運算
|運算子|名稱|範例(`x=5`)|答
|-:|-|-|-
|`<`|小於|`age < 30`|`false`?<!-- .element: class="fragment" data-fragment-index="1" -->
|`>`|大於|`girl_friend > 1`|`false`<!-- .element: class="fragment" data-fragment-index="2" -->
|`>=`|不小於|`x >= 8`|`false`<!-- .element: class="fragment" data-fragment-index="3" -->
|`<=`|不大於|`x <= 8`|`true`<!-- .element: class="fragment" data-fragment-index="4" -->
----
|運算子|描述|範例(`x=5`)|答
|-:|-|-|-
|`==`|等於|`x == 8`<br>`x == 5`<br>`x == "5"` |<span>`false`<!-- .element: class="fragment" data-fragment-index="1" --></span><br><span>`true`<!-- .element: class="fragment" data-fragment-index="2" --></span><br><span>`true`<!-- .element: class="fragment" data-fragment-index="3" --></span>
|`!=`|不等於|`x != 8`|`true`<!-- .element: class="fragment" data-fragment-index="4" -->
|`===`|型態、值都相等|`x === 5`<br>`x === "5"`|<span>`true`<!-- .element: class="fragment" data-fragment-index="5" --></span><br><span>`false`<!-- .element: class="fragment" data-fragment-index="6" --></span>
|`!==`|型態、值不相等|`x !== 5`<br>`x !== "5"`<br>`x !== 8`|<span>`false`<!-- .element: class="fragment" data-fragment-index="7" --></span><br><span>`true`<!-- .element: class="fragment" data-fragment-index="8" --></span><br><span>`true`<!-- .element: class="fragment" data-fragment-index="9" --></span>
----
## 陣列 Array
```javascript
陣列 = [123, 'word', True, 3.14]
```
取用陣列某一個東西：`陣列[0]`、`陣列[1]`
| 索引 | 陣列的東西 |
| ---- | -------- |
| 0 | `123` |
| 1 | `'word'` |
| 2 | `True` |
| 3 | `3.14` |
值得一提的是：它能將 *不同型態* 的資料放在一起
----
## 物件 Object
基本上，JavaScript 內的所有東西都可以視為一個物件，而且可以被存放在變數裡。請將這個概念記下來。
```javascript
var x = document.querySelector('h1')
```
到這之前的所有例子也都是**物件**。
----
看看我們體驗社課時看到的例子
```javascript=!
var 某人 = {
暱稱 : 'VJ',
年齡 : 22,
性別 : '男',
興趣 : ['看韓劇', '睡覺', '電腦遊戲'],
高中畢業與否 : true,
打招呼: function() {
alert('Hello world')
}
};
```
----
:::spoiler 練習: `BMI.html`
```htmlembedded=
<script>
身高 = prompt('請輸入身高(cm)')
體重 = prompt('請輸入體重(kg)')
alert(`身高: ${身高}
體重: ${體重}
BMI: ${體重/(身高*.01)**2}`)
</script>
```
:::
試用輸出入寫一個 BMI 計算器 [...wiki](https://zh.wikipedia.org/wiki/%E8%BA%AB%E9%AB%98%E9%AB%94%E9%87%8D%E6%8C%87%E6%95%B8)
正常範圍是 $18.5$ ~ $25$，公式
$$
BMI = 體重(kg) / 身高^2(m^2)
$$
例如一個$52kg$的人，身高是$155cm$，則
$$
52/1.55^2 = 21.6(kg/m^2)
$$
提示: 還記得[存檔](#動動手-存檔)和[運算子](#運算子)嗎?
{"metaMigratedAt":"2023-06-16T21:38:31.603Z","metaMigratedFrom":"YAML","breaks":true,"description":"JavaScript教學-110-2主題社課-國立中興大學資訊科學研習社","title":"資料型態","contributors":"[{\"id\":\"6d6e3ba2-6820-4c6f-9117-f09bccc7f7aa\",\"add\":549,\"del\":356},{\"id\":\"e86b6571-4dea-4aa4-ba20-ece559b0e015\",\"add\":9147,\"del\":2961}]"}