HTML中的三把利器的JS 又稱為JavaScript，看著好像和Java有點聯絡，實際上他和java半毛錢關係都沒有，JavaScript和我們學習的Python、Go、Java、C++等，都是一種獨立的語言，Python的直譯器有Python2.7、Python3.x，瀏覽器具有解釋JavaScript的功能，所以它才是HTML的三把利器之一。

在HTML中可以將JavaScript/JS的程式碼寫在head中，被script標籤所包裹，當瀏覽器解釋HTML時，遇到style標籤時，按照CSS規則解釋，遇到Script標籤時，按照JavaScript的語法規則解釋。

引入JavaScript程式碼，類似於Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS與body中引入JS區別

html程式碼從上而下解析，如果在head中引入JS，影響頁面開啟的速度，存在風險，所以通常放在htmlbody的最下方，這樣頁面內容先展示，最後在載入JS。注：寫在最下面要有底線，寫在body內部的最底下。

註釋

單行註釋通過 // 多行通過 /* */

JS變數

es5
name = 'dsx'; // 預設全域性變數 
function func() {
    var name = 'niulaoshi'; // 區域性變數 
 

}
es6
// let 定義的變數沒有 預解析
alert(num1);
let num1 = 1;
alert(num1);
//    const 也沒有變數預解析 const 定義的程式不可以修改 常量
const num2 = 2;
alert(num2);
num2 = 3

JS基本資料型別（JavaScript 宣告資料型別通過new）

字串

//定義字串 
var str = '你開心就好！'; 
var name = '大師兄'; 
// 字串的拼接 
var name_str = name+str;  
//字串操作 
str = '大師兄' 
str.charAt(0) 根據角標獲取字串中的某一個字元  char字元 
str.substring(
 
1,3) 根據角標獲取 字串子序列 大於等於x  小於y 
str.length 獲取字串長度 
str.concat('牛教授')  拼接字串 
str.indexOf('大師') 獲取子序列的位置 
str.slice(0,1)  切片 start end 
str.toLowerCase()  變更為小寫 
str.toUpperCase() 變更大寫 
str.split('師',1) 切片 返回陣列 引數2 為取分割後陣列的前x個元素
 
數字型別（JavaScript 只有一種數字型別。數字可以帶小數點，也可以不帶）
 
var age = 18;
var score = 89.22; 
number = '18'; 
// 字串轉
var n = parseInt(number); 
// 轉換成小數 
f =parseFloat(number)
布林型別（true 或 false）
var t = true; var f = false;

陣列型別（就是Python的列表）

// 第一種建立方式 var list = new Array(); 
list[0] = '大師兄'; 
list[1] = '牛教授'; 
 
// 第二種建立方式 
var list2 = new Array('大師兄','牛教授'); 
 
// 第三種建立方式 
var list3 = ['大師兄','牛教授']; 
 
陣列操作 
var list3 = ['大師兄','牛教授'];
 
list3.length 陣列的長度 
 
list3.push('dsx') 尾部追啊引數 
 
list3.shift() 頭部獲取一個元素 並刪除該元素 
 
list3.pop() 尾部獲取一個元素 並刪除該元素 
 
list3.unshift('dsx') 頭部插入一個數據 
 
list3.splice(start, deleteCount, value) 插入、刪除或替換陣列的元素 
 
list3.splice(n,0,val) 指定位置插入元素 
 
list3.splice(n,1,val) 指定位置替換元素 
 
list3.splice(n,1) 指定位置刪除元素 
 
list3.slice(1,2) 切片;
 
list3.reverse() 反轉 
 
list3.join('-') 將陣列根據分割符拼接成字串 
 
list3.concat(['abc']) 陣列與陣列拼接 
 
list3.sort() 排序

物件型別（等同於Python的字典）

var dict = {name:'dsx',age:18,sex:'男' };
var age = dict.age; 
var name = dict['name'];
delete dict['name'] 刪除
delete dict.age 刪除

定時器

setInterval(alert('大師兄'),5000); //引數1 為定時器執行的功能，第二個引數為定時器工作的間隔時間 毫秒為單位
 
function t1() {
    console.log('我是大師兄')
}
setInterval('t1()', 5000);// 可以執行方法

JS條件判斷語句

if (條件) {
    執行程式碼塊
} else if (條件) {
    執行程式碼塊
} else {
    執行程式碼塊
};
 
if (1 == 1) {
    console.log()
} else if (1 != 1) {
    console.log()
} else if (1 === 1) {
    console.log()
} else if (1 !== 1) {
    console.log()
} else if (1 == 1 && 2 == 2) { //and
    console.log()
} else if (1 == 1 || 2 == 2) { //or
    console.log()
}
 
switch (a) {
    case 1:
        console.log(111);
        break;
    case 2:
        console.log(222);
        break;
    default:
        console.log(333)
}

JS迴圈語句

第一種迴圈
迴圈的是角標
tmp = ['寶馬', '賓士', '尼桑'];
tmp = '寶馬賓士尼桑';
tmp = {'寶馬': 'BMW', '賓士': 'BC'};
for (var i in tmp) {
    console.log(tmp[i])
}
第二種迴圈
不支援字典的迴圈
for (var i = 0; i < 10; i++) {
    console.log(tmp[i])
}
第三種迴圈
while (1 == 1) {
    console.log(111)
}

函式定義

1、普通函式
function 函式名(形參, 形參, 形參) {
    執行程式碼塊
}
函式名(形參, 形參, 形參);
 
2、匿名函式 匿名函式沒有名字，無法呼叫時找到，將整個函式當做一個引數傳遞
setInterval(function () {
    console.log(11)
}, 5000);
3、自執行函式建立函式並且自動執行
當引入多個js檔案時，函式名可能會出現重複，這時通過自執行函式，保證每一個js檔案都會被解析，從而生成獨立的容器，防止呼叫衝突
(function (name) {
    console.log(name)
})('dsx');
 
作用域
Python的作用域是以函式作為作用域的，其他語言以程式碼塊（{}）作為作用域的。
JavaScript是以函式作為作用域
function tmp() {
    var name = 'dsx';
    console.log(name)
}
tmp();
console.log(name);
2、函式作用域在函式未被呼叫之前，已經建立
var name = 'nhy';
function a() {
    var name='dsx';
    function b() {
        console.log(name);
    }
    return b
}
 
var c = a();
c();
3、函式的作用域存在作用域鏈（程式碼不執行時，先生成作用域鏈）
當函式巢狀函式時，每一個函式為一個作用域，多層就叫做作用域鏈，查詢遵循作用域鏈規則
function outer() {
    name = 'nn';
    function inner() {
        var name = 'ii'
        console.log('in', name)
    }
 
    console.log('out', name);
    inner()
}
outer();
函式不呼叫時，只生成作用域，當呼叫時遵循作用域鏈執行，name都為hhh
function outer() {
    var name = 'nn';
    function inner() {
        console.log('in', name)
    }
 
    var name = 'hhh';
    console.log('out', name);
    inner()
}
outer();
4、函式內,區域性變數提前宣告 JavaScript的函式在執行前會找到函式內的所有區域性變數執行
var xxx;
function func() {
    console.log(name);
    var name = 'dsx';
}
func();
 
ES6
var demo = function (a,b) {
    alert(a+b)
};
demo(2,2);
// 箭頭函式時es6的寫法，多個引數 括號括起來 接一個=> 大括號中的寫的和其他函式中相同
var rs = (a,b) =>{
    alert(a+b)
};
rs(1,2);
// 單個引數可以省略括號 但是建議寫上
var rs2 = (a) =>{
    alert('a')
};
rs2();
//    箭頭函式可以解決 在vue中寫請求時 獲取不到當前vue例項data資料的問題
 
//ES6 物件簡寫
let name = 'aa';
let age = 12;
var person = {
    name:name,
    age:age,
    show:function () {
        
    }
};
person.show();
 
let person = {
    name,
    age,
    show(){
        alert(this.age)
    }
};
person.show()
 
// 箭頭函式和普通函式的區別
//使用箭頭函式定義函式
var f = () => { console.log(this) };
var obj = { a:f };
foo(); //Window
obj.a(); //Window
使用箭頭函式的時候，this的指向是沒有發生變化的。
 
//使用function定義的函式
function f(){
     console.log(this);
}
var obj = { a: f };
foo(); //Window
obj.a() //obj { a: foo }
使用function定義的函式中this指向是隨著呼叫環境的變化而變化的

面向物件

// 在JavaScript中，方法和類寫法類似，區別方式為是否有this，如果有就可以當做是類來用 
// JavaScript的類預設就擁有了Python的建構函式__init__
function Foo(name) {
    this.name = name;
}
// 建立物件時JavaScript需要用到new關鍵字來建立物件 
var obj = new Foo('dsx');
console.log(obj.name);
 
// 類中定義方法，雖然可以用，但是在多個例項時存在重複例項方法，浪費資源
// 建立物件時，say每次建立物件，都會創意一個say的方法。 
function Foo1(name) {
    this.name = name;
    this.say = function () {
        console.log(this.name)
    }
}
var obj1 = new Foo1('dsx_obj1');
obj1.say();
// 完善類的定義 
function Foo2(name) {
    this.name = name
}
// 類的原型,將共用的的方法抽出來，當在例項化後，只建立了一個叫做Foo2的物件，物件內只有name，在呼叫方法時去現在Foo中找，沒有找到，會在去原型中找
是否有該方法。有執行，沒有就報錯 
Foo2.prototype = {
    say: function () {
        console.log(this.name)
    }
};
var obj2 = new Foo2('dsx_obj2');
obj2.say();

序列化

JSON.stringify(obj) 序列化 
JSON.parse(str) 反序列化

轉義

轉義中文或特殊字元

1、在標準的url的規範中是不允許出現中文字元或某些特殊字元的，所以要進行轉義
2、& 代表引數的連結，如果就是想傳& 給後端那麼必須轉義 
decodeURI(url) URl中未轉義的字元
decodeURIComponent(url) URI元件中的未轉義字元 
encodeURI(url) URI中的轉義字元
encodeURIComponent(url) 轉義URI元件中的字元
 
字串轉義
var name='大師兄' 
escape(name) 對字串轉義 
unescape(name) 轉義字串解碼