---
# System prepended metadata

title: JavaScript第一章-數據
tags: [第一章, JavaScript]

---

---
tags: JavaScript,第一章
---
# JavaScript第一章-數據
## 骨架

行內式、內嵌式、外聯式(跟CSS差不多)
```
// 外聯式
<html>
    <head>
        <title></title>
        <script src="my.js"></script>
<!--         <script src="my.js">不可以在這寫程式碼了</script> -->
    </head>
    <body>
        內容
        <script src="my.js"></script>
    </body>
</html>
```
JS註釋
```
//單行註釋 ctrl + /
/*
    多行註釋 shift + alt + a
    建議自己去設定裡面改快捷鍵
*/
```
基礎指令
```
<html>
    <head>
        <title></title>
        <script>
        alert(msg);    //彈出警示框
        console.log(msg);    //控制台打印訊息
        prompt(info);    //彈出輸入框，用戶可以輸入
        </script>

    </head>
    <body>
        內容
    </body>
</html>
```

# 變量
```
打廣告
Diagram Designer
畫流程圖程式
```
變量是用於存放數據的容器，我們透過變量名獲取數據，甚至數據可以修改
變量命名規範
==組成元素:英文、數字、下劃線、美元符號$==
嚴格區分大小寫:var app;和var App;是兩個變量
不能以數字開頭，不能中間有空格，寫錯會有紅色波浪線
不能是關鍵字、保留字:var、for、while
name算保留字
變量名必須有意義
駝峰命名法:myFirstName
1.聲明變量
```
var age;
```
2.賦值
```
age = 18;
```
3.輸出結果
```
console.log(age);
```
4.變量的初始化(同時完成步驟1.2.)
```
var myname = 'pink老師';
console.log(myname);
```
## 基礎應用
1.用戶輸入姓名，儲存到一個myname的變量裡面
```
var myname = prompt('請輸入你的名字');
```
2.輸出這個用戶名
```
alert(myname);
```
## 變量特性
1.更新變量
一個變量被重新賦值後，他原有的值就會被覆蓋
```
var age = 18;
age = 19;
```
2.聲明多個變量
```
var age = 18,
    address = '木葉村',
    rmb = 2000;
```
3.聲明變量特殊情況
情況一:只聲明不賦值
```
var sex;
console.log(sex);
// 結果
// undefined
```
情況二:不聲明不賦值
```
console.log(telphone);
// 結果
// 報錯
```
情況三:不聲明只賦值
```
qq = 110;
console.log(qq);
// 結果(驚訝)
// 110
```
## 交換變量
temp臨時變量
```
var temp;
var apple1 = '青蘋果'
var apple2 = '紅蘋果'
temp = apple1; //右邊給左邊的
apple1 =apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
```
# 數據
```
var num = 10; //數字型
var str = 'pink' //字符串
// 變量重新賦值
var x = 10; //x是數字型
x = 'pink'; //x是字符串
```
## 數據類型
number 數字型
包含整數與浮點數
默認值 = 0
```
// 數字前面加0表示八進制
var num1 = 010
console.log(num1); // 打印出轉換成10進制的值
// 數字前面加0x表示十六進制
var num2 = 0xa
console.log(num2); // 打印出轉換成10進制的值
```
```
// 數字型最大值 // 注意大小寫都要吻合
console.log(Number.MAX_VALUE);
// 數字型最小值 // 注意大小寫都要吻合
console.log(Number.MIN_VALUE);
// 無窮大
console.log(Number.MAX_VALUE * 2); // Infinity 無窮大
// 無窮小
console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮小
```
NaN
```
// 非數字
console.log('pink老師' - 100); /// NaN 非數字
```
boolean 布林值
就是true和false
默認值 = false
```
console.log(isNaN(12)); //false
console.log(isNaN('pink老師')); //true
```
string 字符串 
默認值 = ""
用雙引號和單引號都可以
因為HTML都用雙引號
所以在JS裡面都用單引號比較好
```
外單內雙、外雙內單
var str1 = '我是一個"高富帥"程序員';
console.log(str1);
var str2 = "我是一個'高富帥'程序員";
console.log(str2);
```
字符串轉譯字符
```
\n    換行符    n是newline
\\    一個斜槓\
\'    單引號
\"    雙引號
\t    tab縮進
\b    空格    b是blank
```
Undefined
var a;
聲明變量a但是沒有給值
默認值 = undefined
```
```
Null
var a = null;
聲明變量a為空值
默認值 = null
```
```
## 簡單數據應用
### 算字符串長度
```
var str = 'my name is andy';
console.log(str.length); //結果是15，空格和標點符號也算一格
```
### 字符串拼接
字符串 + 任何類型 = 新字符串
```
console.log('沙漠' + '駱駝'); //沙漠駱駝
console.log('pink老師' + 18); //pink老師18
console.log('pink' + true); //pinktrue
console.log(12 + 12); //24
console.log('12' + 12); //1212
// 進階
console.log('pink老師' + 18);
console.log('pink老師' + 18 + '歲');
var age = 18
console.log('pink老師age歲');
console.log('pink老師' + age + '歲');
```
==基本練習==
```
var age = prompt('請輸入你的年齡');
var str = '你今年已經' + age + '歲了';
alert(str);
```
### 特殊值運算
true參與加法運算當1
false參與加法運算當0
```
var flag1 = true;
var flag2 = false;
console.log(flag1 + 1); // 2
console.log(flag2 + 1); // 1
```
undefined和數字相加結果是NaN
```
var str;
console.log(str); // undefined
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); // NaN
```
null空值
```
var space = null;
console.log(space + 'pink'); //nullpink
console.log(space + 1); // 1
```
### 檢測變量數據類型
```
var num = 10;
console.log(typeof num);    //number    //chrome的顏色紫色
var str = 'pink';
console.log(typeof str);    //string    //chrome的顏色黑色
var flag = true;
console.log(typeof flag);    //boolean    //chrome的顏色藍色
var vari = undefined;
console.log(typeof vari);    //undefined    //chrome的顏色灰色
var timer = null;
console.log(typeof timer);    //object    //chrome的顏色灰色

//prompt取過來的值是字符型的
var age = prompt('請輸入你的年齡');
console.log(age);
console.log(typeof age);

字面量
數字字面量:8 9 10
字符串字面量:'黑馬程序員' "大前端"
布林值字面量:true false
```
## 普通數據應用
### 轉換
轉換為字符串
```
toString()
var num = 1;
alert(num.toString());

String()強制轉換
var num = 1;
alert(String(num));

加號拼接字符串
var num = 1;
alert(num + '我是字符串');
```
```
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);

console.log(String(num));

console.log(num + '');
```
轉換為數字型
```
var age = prompt('請輸入你的年齡');
//1.parseInt可以把字符型轉換為數字型 得到是整數
console.log(parseInt(age));
console.log(parseInt('3.14'));    // 3 取整
console.log(parseInt('120px'));    // 120 會把後面文字去掉
console.log(parseInt('rem120px'));    //NaN

//2.parseFloat可以把字符型轉換為數字型 得到是浮點數
console.log(parseFloat('3.14'));    // 3.14
console.log(parseFloat('120px'));    // 120 會把後面文字去掉
console.log(parseFloat('rem120px'));    //NaN

//3.利用Number(變量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));

//4.利用算式運算(減乘除)  隱式轉換
console.log('12' - 0);    // 12
console.log('123' - '120');    // 3
```
轉換為布林值
```
// 只有5種狀況是false
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
// 隨便舉例
console.log(Boolean(123)); //true
console.log(Boolean('123')); //true
console.log(Boolean('小白')); //true
```
==基本練習==
```
var year = prompt('請輸入你的出生年份');
var age = 2018 - year;    //隱式轉換
alert('你今年已經'+age+'歲了');
```
```
var num1 = prompt('請你輸入第一個值: ');
var num2 = prompt('請你輸入第二個值: ');
var result = parseFloat(num1) + parseFloat(num2);
alert('你的結果是:' + result);
```
### 算術運算符
```
console.log(1 + 1);    //2
console.log(1 - 1);    //0
console.log(1 * 1);    //1
console.log(1 / 1);    //1
//取餘
console.log(4 % 2);    //0
console.log(5 % 3);    //2
console.log(3 % 5);    //3
//浮點數  算術運算會有問題
console.log(0.1 + 0.2);    //超長數字
console.log(0.07 * 100);    //超長數字
//不能拿浮點數來進行相比較
var num = 0.1 + 0.2;
console.log(num == 0.3);    //false
```
### 遞增運算符
```
var num = 1;
num = num + 1;
console.log(num);    //2
```
遞增遞減運算符必須和變量一起寫才能用
```
前置遞增運算符
var age = 10;
++age;
console.log(age);    //11
//先加1後返回值
var p = 10;
console.log(++p + 10);    //21
```
```
後置遞增運算符
var num = 10;
num++;
console.log(num);    //11
//先返回原值後自加
var age = 10;
console.log(age++ + 10);    //20
console.log(age)    //11
```
例題一
```
var a = 10;
++a;
var b = ++a + 2;
console.log(b);    //14
```
例題二
```
var c = 10;
c++;
var d = c++ + 2;
console.log(d);    //13
```
例題三
```
var e = 10;
var f = e++ + ++e;    //1. e++ = 10 e = 11 2. e = 12 ++e = 12 
console.log(f);    //22
```
實際開發常用後置遞增
讓代碼獨佔一行
不會邊++邊做其它運算
### 比較運算符
比較運算後會返回一個布林值
```
<    小於號
>    大於號
<=    小於等於
>=    大於等於
==    判等號
!=    不等號
===    全等號
console.log(18 == '18');    //true
```
### 邏輯運算符
```
//1.邏輯與 && 兩側都為true 結果才是true
console.log(3 > 5 && 3 > 2);    //false
console.log(3 < 5 && 3 > 2);    //true
//2.邏輯或 || 兩側都為false 結果才是false
console.log(3 > 5 || 3 > 2);    //true
console.log(3 > 5 || 3 < 2);    //false
//3.邏輯非 !
console.log(!true);    //false
```
短路運算
參考"轉換為布林值"
只用值或表達式參與邏輯運算
```
//1.邏輯與
//如果第一個表達式為真，則返回表達式2
//如果第一個表達式為假，則返回表達式1
console.log(123 && 456);    //456
console.log(0 && 456);    //0
console.log(0 && 1 + 2 && 456 * 56789);    //0
```
```
//2.邏輯或
//如果第一個表達式為真，則返回表達式1
//如果第一個表達式為假，則返回表達式2
console.log(123 || 456);    //123
console.log(123 || 456 || 456 + 123);    //123
console.log(0 || 456 || 456 + 123);    //456
```
==邏輯或混合加法陷阱==
```
var num = 0;
console.log(123 || num++);    //123
// 因為已返回123，所以後面的東西都不運算了
console.log(num);    //0
```
### 賦值運算符
```
var num = 10;
// num = num + 1;    num++
// num = num + 2;    num += 2

+=
-=
*=
/=
%=
```
### 運算符優先級
| 運算符   | 優先級              | 順序             |
| ------  | ----------         | ------------    |
| 1       | 小括號              | ()              |
| 2       | 一元運算符           | ++ - - !        |
| 3       | 算術運算符           | 先* / %後+ -     |
| 4       | 關係運算符           | > >= < <=       |
| 5       | 相等運算符           | == != === !==   |
| 6       | 邏輯運算符           |  先&&後ll        |
| 7       | 賦值運算符           |  =              |
| 8       | 逗號運算符           |  ,              |





