JavaScript最初命名LiveScript，它是一種腳本語言，運行在客戶端，也可以基于Node.js技術進行服務端編程，

JS作用

• 表單驗證
• 網頁特效
• 服務端開發（Node.js）
• 桌面程式（Electron）
• App（Cordova）
• 控制硬體-物聯網（Ruff）
• 游戲開發 （cocos2d-js）

JS的組成

• ECMAScript - Javascript語法
• DOM - 頁面檔案物件模型
• BOM - 瀏覽器物件模型

JS書寫位置

• 行內式

<input type="button" value="行內式" onClick="alert('Hello World!')" >

• 內嵌式

<script>
	alert('Hello World!');
</script>

• 外部

<script src="xxx.js">這里不允許寫任何代碼</script>

注釋

• 單行注釋

// 這是單行注釋

• 多行注釋

/*
	這是多行注釋 
*/

輸入輸出陳述句

• alert(msg) - 瀏覽器彈出警示框

alert('警示框');

• console.log(msg) - 瀏覽器控制臺列印輸出資訊

// 在瀏覽器開發者工具(F12)的Console中查看
console.log('測驗使用')

• prompt(info) - 瀏覽器彈出輸入框，用戶可以輸入

prompt('輸入框');

變數

// 宣告變數
var age;
// 給變數賦值
age = 18;
// 變數的初始化
var myname = '落葉';
// 宣告多個變數
var employeename = 'Kevin',
	phonenumber = 186,
	address = 'xxxx';
// 宣告變數的特殊情況
// 1. 只宣告不賦值，結果是undefined未定義的
var sex;
// 2. 不宣告不賦值，會報錯
console.log(tel);
// 3. 不宣告直接使用，是可以的，但是不提倡使用，
email = 'xxxx@xx.com';

變數命名規范

• 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號($)組成，如：usrAge, num01, _name
• 嚴格區分大小寫，var app；和var App；是兩個變數
• 不能以數字開頭，18age 是錯誤的
• 不能是關鍵字、保留字，如：var、for、while
• 變數名必須有意義，最好是英文單詞，
• 遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，如：myFirstName

變數型別

Javascript是一種弱型別或者說動態語言，變數的型別在程式運行程序中被自動確定，

var age = 18; 				   // 這是一個數字型
var myName = 'Pianpianluoye';  // 這是一個字串
var a = b = c = 9; //等同于 var a = 9; b = 9; c = 9;
var e = 9 , f = 9 , g = 9; // 等同于 var e = 9; var f = 9; var g = 9;

// JavaScript 擁有動態型別，相同變數可以作用不同型別
var x = 6;				// x 為數字
var x = 'Material';		// x 為字串

簡單資料型別

• Number - 數字型，包含整型值和浮點型值，默認值為0

// 數字型最大值
console.log(Number.MAX_VALUE);
// 數字型最小值
console.log(Number.MIN_VALUE);
// 無窮大
alert(Infinity);
// 無窮小
alert(-Infinity);
// Nan - 代表一個非數值
alert(NaN);
// 判斷非數字,非數字為true，數字為false
console.log(isNaN(12)); // false

• Boolean - 布爾型別，默認值false

// Boolean型別參與運算預算時 true = 1 false = 0
console.log(true + 1);   // result: 2
console.log(false + 1);  // result: 1

• String - 字串型別，默認值""

// 字串型別必須要加引號，因為HTML中使用的是雙引號，建議JS里使用單引號
var strName = 'Pianpianluoye'; 
var strAddress = "Pianpianluoye"; 
// 如果引號嵌套，可以外雙內單或外單內雙的規則
var strProject = '這是一個"專案"描述';
var strType = "這是一個'型別'描述";

字串轉義符

• \n - 換行
• \\ - 斜杠
• \’ - 單引號
• \" - 雙引號
• \t - 縮進
• \b - 空格

字串拼接

// 字串拼接 +
// 只要有字串型別和其他型別的拼接，結果一定是字串拼接，數字相加，字符相連口訣，
console.log('str1' + 'str2');
console.log('我' + 18 + '歲');
// 含有變數的字串拼接
var age = 18;
console.log('我' + age + '歲');

• Undefined - 未定義型別，默認值undefined

// 如果一個變數宣告未賦值，就是undefined未定義資料型別
var str;
console.log(str);
var variable = undefined;
console.log(variable + '未定義型別'); // result:undefined未定義型別
console.log(variable + 1); // result:NaN

• Null - 空值，默認值為null

// Null 代表空值
var space = null;
console.log(space + '空值'); // result:null空值
console.log(space + 1); // result:1

進制

• 八進制：數字前加0，表示八進制

// 八進制表示 0 ~ 7
var num = 010;

• 十六進制：數字前加0x，表示十六進制

// 十六進制表示 0 ~ 9  a ~ f
var = 0x9;

獲取資料型別

// 獲取變數的資料型別
var num = 10;
console.log(typeof num);
var date = null;
console.log(typeof date); // 結果輸出型別為 object！！！

資料型別轉換

數字轉換成字串

// 數字轉換成字串 toString()
var num = 1;
alert(num.toString());

// 數字轉換成字串 String()
var num = 1;
alert(String(num));

// 加號拼接字串，也稱隱士轉換
var num = 1;
console.log(num + '');

字串轉換成數字

var age = '18';
var price = '18.88'

// parseInt(string)函式，將string型別轉換為整數數值型
console.log(parseInt(age));	  // 18
console.log(parseInt(3.14));  // 3，取整
console.log(parseInt(3.94));  // 3，取整不進位
console.log(parseInt(120px)); // 120，會去掉單位

// parseFloat(string)函式，將string型別轉為成浮點數數值型
console.log(parseFloat(price)); // 18.88

// Number()強制轉換函式，將string型別轉換為數值型
console.log(Number(age)); // 18
console.log(Number(price)); // 18.88

// js隱士轉換(-*/) 利用算術運算隱士轉換為數值型
console.log('18' - 0); // 18
console.log('15' * 1); // 15
console.log('16' / 1); // 16

轉換成布林值

// 代表空、否定的值會被轉換成false，如：''、0、NaN、null、undefined，其余值都會轉換成true，
console.log(Boolean(''));     //false
console.log(Boolean('true')); //true

運算子

算術運算子

// + 加
// - 減
// * 乘
// / 除
// % 取余
// 不要直接判斷兩個浮點數是否相等
// 因為浮點數精度，運算時會出問題

運算式和回傳值

// 任何運算式都會有一個回傳值
var num = 1 + 1;

遞增和遞減運算子

var num = 1;
// 前置遞增,先自加1后回傳值
// ++num; 等同于 num = num + 1;
console.log(++num + 15); // 17
// 后置遞增,先回傳原值后自加
// num++; 等同于 num = num + 1;
console.log(num++ + 15); // 16
// 此時num的值已從1自加成2
console.log(num); // 2

var num1 = 5;
// 前置遞減,先自減1后回傳值
// num1; 等同于 num1 = num1 - 1;
console.log(--num1 + 15); // 19
// 后置遞減，先回傳原值后自減
// num1--; 等同于 num1 = num1 - 1;
console.log(num-- + 15); // 20
// 此時num1的值已從5自減成4
console.log(num1--); // 4

var num2 = 20;
var result = num2++ + ++num2; // 42

// num++ 和 ++num 單獨使用時沒有任何區別
// num-- 和 --num 單獨使用時沒有任何區別

比較運算子

// 比較運算子中的等于是 ==
console.log(25 == '25'); // true  == 會默認轉換資料型別
// 比較運算子中的不等于是 !=
console.log(25 != '25'); // false  != 會默認轉換資料型別
// 比較運算子中的全等是===
console.log(18 === 18);   // true
console.log(18 === '18'); // false  要求值和資料型別完全一致
// 比較運算子中的不全等于是!==
console.log(18 !== 18);   // false
console.log(18 !== '18'); // true

邏輯運算子

• && - 與

// 兩邊都為true才為true
console.log(3 > 5 && 6 > 4); // false
console.log(3 < 5 && 6 > 4); // true

• || - 或

// 兩邊都為false才為false，否則就是true
console.log(3 > 5 || 6 > 4); // true
console.log(3 > 5 && 6 < 4); // false

• ! - 非

console.log(!true);     // false
console.log(!(3 > 5));  // true

短路運算（邏輯中斷）

當有多個運算式（值）時，左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值，

// 為值的時候，除了0 '' null undefined NaN全是真
// 如果第一個運算式的值為真，則回傳運算式2
// 如果第一個運算式的值為假，則回傳運算式1
console.log(123 && 456); // 456
console.log(0 && 456);   // 0
console.log(0 && 1 + 2 && 342 * 523); // 0

// 如果第一個運算式的值為真，則回傳運算式1
// 如果第一個運算式的值為假，則回傳運算式2
console.log(123 || 456); // 123
console.log(0 || 456);   // 456
console.log(0 || 1 + 2 || 342 * 523); // 3

var num = 0;
console.log(123 || num++);
console.log(num);  // 0 , 邏輯中斷，num++不運算，

賦值運算子

var num = 10;
num = num + 1; num++;
num = num + 2; num += 2;
num = num - 2; num -= 2;
num = num * 2; num *= 2;
num = num / 2; num /= 2;
num = num % 2; num %= 2;

運算子的優先級

流程控制

IF語法結構

if (條件運算式) {
	// 執行陳述句1;
};

if (條件運算式) {
	// 執行陳述句1;
} else {
	// 執行陳述句2;
};

if (條件運算式1) {
	// 執行陳述句1;
} else if (條件運算式2) {
	// 執行陳述句2;
} else {
	// 執行陳述句3;
};

三元運算式

// 如果運算式條件為真，則回傳運算式1的值，如果運算式條件為假，則回傳運算式2的值
var num = 10;
var result = num > 5 ? 'Yes' : 'No';

SWITCH 陳述句

// 運算式條件值 和case后面的值是全等條件
switch (運算式) {
    case value1:
        執行陳述句1;
        break;
    case value2:
        執行陳述句2;
        break;
    ...
    default:
        執行最后的陳述句;
};

回圈

for 回圈

for (初始化變數; 條件運算式; 操作運算式) {
	// 回圈體
};

for (var i = 1; i<=100; i++) {
	console.log('Hello World!');
};
//------------------------------------------
var sum = 0
for (var i = 1; i <= 100; i++) {
    sum += i;
};
console.log(sum)

while 回圈

// 當條件運算式為真時執行回圈體
while (條件運算式) {
	// 回圈體代碼
}

do while 回圈

// 先執行一次回圈體，在判斷條件
do {
	// 回圈體代碼
} while (條件運算式)

Continue

用于立即跳出本回圈，繼續下一回圈，

Break

用于立即跳出整個回圈，

陣列

一組資料的集合，

創建陣列

// new 關鍵字創建陣列
var arr  = new Array(2); // 2代表陣列的長度
var arr1 = new Array();

// 利用陣列字面量創建陣列
var arr2 = [];
var arr3 = [1,2,3,4,5,true,'P'];  // 元素用逗號分開，元素的型別可以是任意型別，

陣列的索引

用來訪問陣列元素的序號(陣列下標從0開始)

// 訪問陣列元素
var arr3 = [1,2,3,4,5,true,'P'];
console.log(arr3[3]);

// 遍歷陣列
// arr3.length 陣列的長度是元素的個數
for (i = 0; i < arr3.length; i++) {
	console.log(arr[i]);
}

新增陣列元素

可以通過修改length長度

var arr = [1,2,3,4,5,true,'P'];
arr.length = 10;

可以通過修改索引號

var arr = [1,2,3,4,5,true,'P'];
arr[8] = 'R';
arr[13] = 'U';

冒泡排序

冒泡排序是一種簡單的排序演算法，它重復的走過要排序的數列，一次比較兩個元素，如果他們的順序錯誤就把它們交換過來，走訪數列的作業是重復的進行直到沒有再需要交換，也就是說該數列已經排序完成，這個演算法的名字由來是因為越小的元素會經由交換慢慢"浮"到數列的頂端，

 var arr = [4, 3, 5, 1, 7];

 for (var i = 0; i <= arr.length - 1; i++) { // 外回圈，用來確定比較幾輪 
 
 // arr.length - i 內回圈都走完之后會確定一個最大值，
 // 所以下一輪的內回圈不需要arr.length - 1的次數，
 // 只需要arr.length - 1再減去外回圈的次數i即可，不需要做無用的比較，
 
     for (var j = 0; j <= arr.length - i - 1; j++) { // 內回圈，用來做每輪的交換次數
         if (arr[j] > arr[j + 1]) {
             var tmp = arr[j];
             arr[j] = arr[j + 1];
             arr[j + 1] = tmp;
         }
     }
 }
 console.log(arr);

函式

1. 宣告函式

function 函式名() {
	// 函式體
}

2. 呼叫函式

function sayHello() {
	console.log('Hello World!');
	sayHello();
}

3. 函式的引數

// 1. 形參
function 函式名(形參1, 形參2, 形參3) {
	// 函式體
}
// 2. 實參
函式名(實參1, 實參2, 實參3);
// 形參無實參傳遞值時，為undefined型別，

// 3. 函式的回傳值
function 函式名() {
	// return 需要回傳的結果;
}

function getAge (age) {
	return age;
}
console.log(getAge(18));
// return 后面的代碼不會執行，并且只能回傳一個值(最后一個值)
// 回傳多個值可以放到陣列里實作 return [1,2,3,4];
// 沒有寫return的話函式就回傳undefined

arguments
函式的一個內置物件，所有函式都有，arguments物件存盤了傳遞的所有實參，
arguments是一個偽陣列（具有陣列的length屬性、按照索引的方式進行存盤、它沒有真正陣列的一些方法）

function arg(){
	console.log(arguments);
}
arg(1,2,3);

函式運算式宣告函式，由于函式沒有名字也叫匿名函式，

var 變數名 = function (){
	console.log('函式運算式');
};
// 呼叫
變數名();

函式的形參可以看成是區域變數
如果函式內部沒有宣告直接賦值的變數也屬于全域變數
在JS中，es6中才增加的塊級作用域，es6之前是沒有塊級作用域的，
塊級作用域 {} , if {} 、 for {} 作用域鏈，內部函式可以訪問外部函式的變數，

預決議

JS引擎運行js分兩步：預決議、代碼運行
JS引擎會把js里面所有的var還有function提升到當前作用域的最前面

變數預決議

又叫變數提升，就是把所有的變數宣告提升到當前作用域的最前面，不提升賦值操作，

函式預決議

又叫函式提升，就是把所有的函式宣告提升到當前作用域的最前面，不呼叫函式，

物件

創建物件

字面量創建

// var obj = {};
var obj = {
	uname: '',
	age: 20,
	sex: '男'
	sayHello: function () {
		console.log('Hello World!');
	}
};

// 呼叫物件方法
console.log(obj.uname); 
console.log(obj['sex']);
obj.sayHello();

new Object創建物件

var obj = new Object();
obj.uname = 'Pianpianluoye';
obj.age = 20;
obj.sex = '男';
obj.sayHello = function() {
	console.log('Hello World!');
}

利用建構式創建物件

建構式，是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與new運算子一起使用，

// 建構式名，首字母大寫，因為new會回傳這個新物件，所以建構式里不需要return，
function Employees(uname, age, sex) {
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sayHello = function(say) {
		console.log(say);
	}
}
var pply = new Employees('Pianpianluoye', 25, '男');
console.log(pply.name);
console.log(pply['age']);
pply.sayHello('Hello World!');

遍歷物件

for (var k in obj) {
	console.log(k); // 輸出的是屬性名
	console.log(obj[k]); // 輸出的是屬性值
}

內置物件

物件分為：自定義物件、內置物件、瀏覽器物件
MDN Web檔案