JavaScript是什么
- 是一種運行再客戶端（瀏覽器）的腳本語言
JS的作用
- 網頁特效
- 表單驗證
- 服務器端的JS
- 命令行工具
- app
- 游戲開發
- 數據交互
JS的組成
- ECMAscript：核心，描述了語言的基本語法和數據類型，是一套標準（定義一種語言的標準與具體實現無關）
- DOM：一套操作頁面元素的API
- BOM：一套操作瀏覽器功能的API
JS的基礎語法
書寫環境
- 放在body結束標簽的前面
<script>
alert('Hello world');
</script>
- 獨立的JS文件，通過script標簽引入(注意：引用外部的script標簽內不可以寫JavaScript代碼)
<script src="路徑"></script>
輸出語法
- 調用彈出框功能——alert()
- 調用對話框功能——prompt()
- 確認框——confirm()
- 頁面輸出——document.write()
- 控制臺輸出——console.log()
// 調用彈出框功能
alert('Hello world');
// 調用對話框功能
prompt('Hello');
// 確認框
confirm('Are you sure?');
// 向頁面輸入對應的值
document.write('你好呀');
// 向控制臺輸出日志
console.log('我是出現在控制臺 ，一般用于后期調試代碼');
變量（一塊被命名的存儲空間）
語法：
- 先聲明，再賦值
- 直接聲明并賦值
- 先集體聲明，再集體賦值
- 直接集體聲明并賦值
- 不聲明直接賦值，不會報錯，但是不符合規范（帶來作用域問題）
- 不聲明不賦值，直接使用會報錯
// 先聲明
var a;
// 后賦值
a = 1;
console.log(a);
// 聲明并賦值 使用最多
var a = 1;
console.log(a);
// 同時聲明多個變量 并單獨賦值
var a, b, c, d, e;
a = 1;
b = 2;
c = 3;
d = 4;
e = 5;
console.log(a, b, c, d, e);
// 同時聲明多個變量并且直接賦值
var a = 1,
b = 2,
c = 3;
// 不聲明直接賦值 不要這么使用 會帶來作用域問題
// a = 1;
// console.log(a);
// 不聲明不賦值 直接使用 直接報錯
// console.log(a);
// console.log(name);
// console.log(window);
變量起名規則和規范
規則：
- 字母，數字，下劃線，$符號可以用來變量命名，不能用數字開頭命名，使用小駝峰命名法
- 不能使用關鍵字和保留字（var，for，while...）
關鍵字：有特殊意義的字符
保留字：現在沒有意義，但是以后可能會有意義的字符
3.區分大小寫
規范：
- 變量名有意義
- 遵守駝峰式命名法：首字母小寫，后面單詞首字母大寫
兩個變量的值交互
方法：
- 借助另一個容器
var a = 10;
var b = 20;
var temp = a;//a為10，temp為10
a = b;//a為20，b為20
b = temp;//b為10，temp為10
//此時，a = 20; b = 10;完成了交換
- 運算（基本不用）
a = a + b;
b = a - b;
a = a - b;
數據類型
- 在程序設計中，數據類型被定義為數據的種類，也就是說一系列可能值以及基于這些值的基本操作，可以更加充分和高效的利用內存和使用數據
六大數據類型
基本數據類型（簡單數據類型）：
- number 數值型
- string 字符串
- Boolean 布爾值
- undefined 未定義
- null 空引用
引用數據類型（復雜數據類型）：
- object 對象
- function 函數
- array 數組
number數據類型
- 所有數字都是Number數據類型
- 利用typeof運算符可以返還當前數據的數據類型（針對簡單數據）
image.png
- 特殊值：NaN not a number //不是一個數字
- 小數的計算可能導致精度的損失（解決：擴大成整數去運算）
string數據類型
- 所有添加了引號的數據都是字符串數據類型，單雙引號都可
- 單雙引號雖然都可以，但是不要引號嵌套；如果要嵌套，要一個單引號一個雙引號，成對出現
-
轉義字符
image.png
布爾數據類型
- 布爾數據類型只有兩個值：true/false（多用于條件判斷）
//Boolean false/true 多用于條件判斷語句
if (條件) {
true的執行體
} else {
flase的執行體
}
undefined數據類型
- 未定義，變量只聲明沒有賦值，瀏覽器會默認賦值一個undefined
null數據類型
- 表示一個空的對象，一般用于將一些對象清空
var a = null;
console.log(typeof (a));//結果為object對象，這是歷史遺留問題
數據類型之間的相互轉換
//問題，數據類型不統一，可能得不到我們想要的數據類型，這時候我們就要進行數據轉換
var a = 1;
var b = '2';
console.log(a + b);//12 ——> 1 + '2' = 12(拼接)
將數據轉換成數值：
- 把字符串轉換成整數——parselnt()
2.把字符串轉換成浮點數——parseFloat()
- 在轉換的過程當中，遇到不能轉換的就停止轉換，將已得結果輸出）
3.把任意值轉換成數值——Number（）
- 如果要轉換的字符串中有一個不是數值的字符，返回NAN
4.隱式轉換： 如果在數字字符串前面添加一個'+'號，會自動隱式轉換成數字類型
/*
將數據轉換成Number的三種方式
1.parseInt(數據);
2.parseFloat(數據);
3.Number(數據);
*/
var a = '1';
// console.log(a); 結果是String
//轉換
//共同點：都可以將數據轉換成Number類型
var b = parseInt(a);
var c = parseFloat(a);
var d = Number(a);
console.log(b, typeof (b));//1 Number
console.log(c, typeof (c));//1 Number
console.log(d, typeof (d));//1 Number
//不同點
var a = 1.11;
var b = parseInt(a);//只能轉換成整數，小數點后面的值省略，會造成精度損失
var c = parseFloat(a);//可以轉換成小數
var d = Number(a);
console.log(b, typeof (b));//1 Number
console.log(c, typeof (c));//1.11 Number
console.log(d, typeof (d));//1.11 Number
var a = '1.1aaaaa1';
var b = parseInt(a);
var c = parseFloat(a);//在轉換的過程當中，遇到不能轉換的就停止轉換，將已得結果輸出
var d = Number(a);//會檢測這個值是否有不能轉換成Number的，如果有，直接輸出NAN（Not A Number）
console.log(b, typeof (b));//1 Number
console.log(c, typeof (c));//1.11 Number
console.log(d, typeof (d));//NaN(不是一種新的數據類型，只是Number數據類型的一個特殊值)
將數據轉換成字符串：
- 將數據轉換成字符串——toString()
- 將數據支持字符串（有些數據不能用toString()，比如undefined null）——String（）
- 隱式轉換：任何數據只需要跟字符串相加結果一定是字符串
/*
將數據轉換成string類型的兩種方式
1.String(數據)
2.變量.toString()
*/
var x = 11;
var y = String(x);
var z = x.toString();
console.log(y, typeof (y));
console.log(z, typeof (z));
//變量.toString()，個別數據使用不了，例如null和undefined
//null.toString();報錯
//undefined.toString();報錯
// console.log(String(null));//'null'
// console.log(String(undefined));//'undefined'
將數據轉換成布爾類型：
- boolean()
- 0，null，undefined，空字符串，false會被轉換成false，不成立的表達式也會
/*
將數據轉換成Boolean類型
1.Boolean(數據);
在布爾當中，數據轉換結果為true的太多，所以我們只需記得結果為false的即可
0,'' (空字符串),null,undefined,不成立的表達式
*/
var a = 'heheheh';
var result = Boolean(a);
console.log(result, typeof (result));//true boolean
var a = 0;
var a = '';
var a = null;
var a = undefined;
var a = 1 > 2;
console.log(result, typeof (result));//false boolean
操作符（運算符）
- 一般用于運算，用來操作數據的符號
算術運算符（+,-,*,/,%）
- 加，減，乘，除，取模
- 加號：兩個數字即相加，如果有字符就相連
//'+'的多種用法
//1.如果+號左右只有一個值，解析結果是正號
var a = '1';
console.log(+a);//1
//2.如果兩邊都是數值，加法運算
console.log(5 + 4);//9
//3.如果其中一邊是字符串，那么'+'號是連接符（將符合兩邊的值連接起來，形成新的字符串）
console.log(1 + '2');//12
//連接符用法口訣：'+變量名+'
var price = 10000;
var salary = 10000;
console.log("蘋果電腦的價格是" + price + "，我有" + salary + "可以買。");
賦值運算符（=）
- 將等號右邊的值賦值給左邊
- 左邊是一個變量（存儲）
- 累加 +=
自增自減運算符（一元運算符）
- a++/++a 先使用再自增/先自增再使用
- a--/--a 先自減再使用/先使用再自減
邏輯運算符（&&與，||或，！非）
&&（與）：
-
語法：表達式1 && 表達式2（表達式1和表達式2同時成立，整個表達式才成立；一個不成立，即為不成立）
image.png
||（或）：
-
語法：表達式1 || 表達式2（表達式1和表達式2只要有一個成立，即為成立）
image.png
!（非）：取反
image.png
比較運算符（>、 <、 >=、 <=、 ==、 ===、 !=、 !==）
// 比較運算符的結果都是布爾值
console.log(2 > 1);
console.log(1 > 2);
// >= <= 這個理解為大于或者等于 小于或者等于
console.log( 5 >= 5 );
console.log( 5 <= 5 );
// == 等于 只要內容相等即可
console.log(3 == 3);
console.log(3 == '3');
console.log(0 == false);
// === 全等 全等不僅僅是內容相等 同時需要比較類型
console.log(3 === '3');
// != 比較內容即可 !== 不僅比較內容還比較類型
console.log(3 !== '3');
// 特殊情況
如果是數字和字符串數字的比較 則字符串數字會自動轉換成數字去比較
如果是字符串和字符串比較 則會每一個字符的ASCII碼去進行比較
- 漢字的unicode編碼值：http://bianma.supfree.net/
涉及到NAN都是false （NaN）
如果是布爾值參與比較 布爾值會轉換成數字0和1
