Javascript

一、Javascript的基本知識
- ECMAScript
- ECMAScript、DOM 和 BOM
二、入門
- 2.1 引入javascript
- 2.2 Javascript語言學習
- - 2.2.1 js彈窗方法 alert()
  - 2.2.2 JavaScript輸出
  - - 2.2.2.1 document.write(String str)
    - 2.2.2.2 console.log() 向浏覽器控制台輸出内容
    - 2.2.2.3 innerHTML 寫入HTML元素
  - 2.2.3 js語言的書寫位置
  - - 将js代碼編寫到标簽的``onclick``屬性中
    - 可以将js代碼編寫到a标簽的``herf``屬性中
- 2.3 Script基本文法
- - 2.3.1 JS中的關鍵字
  - 2.3.2 注釋
  - 2.3.3 JavaScript值
  - - 2.3.3.1 混合值——字面量
    - 2.3.3.2 變量值——變量
  - 2.3.4 辨別符命名規則
三、 JS中的資料類型
- 3.1 基本資料類型
- - 3.1.1 String 類型的基本運算
  - 3.1.2 Number基本資料類型的運算和常量
  - - JS中的數值運算
    - Number.MAX_VALUE 0以上的最大值
    - Number.MIN_VALUE 0以上的最小值
    - - Infinity 無窮
    - NaN Not a Number
- 3.2 引用資料類型
- - 3.2.1定義一個數組類型和對象類型的變量
  - - 取對象的值
  - 3.2.2 Map
  - 3.2.3 Set
- 3.3 JS中的強制類型轉換
- - 3.3.1 其他類型轉String
  - 3.3.2 其他類型轉Number類型
  - - Number針對于String類型的轉換：paresInt(),parseFloat()
  - 3.3.3 其他類型轉Boolean類型 Boolean()函數
- 3.4 typeof 檢查變量類型
- 3.5 JS中其他進制數字的表示
- 3.6 JS中的運算符
- 3.7 浏覽器控制台的使用
- 3.8 嚴格檢查模式strict
- 3.9 JS中的流程控制語句
- - 3.9.1 forEach()
  - 3.9.3 for-of
  - 3.9.2 for-in
- let 與 const
四、函數
- 4.1、定義函數
- - 4.1.1 方式一、
  - 4.1.2 方式二、
  - 4.1.3、函數參數問題
  - - 不含參數
    - 含多個參數的問題——``arguments``重點
    - - 新特性;``rest``
- 4.2 變量的作用域
- - 4.2.1 JS中的局部變量
  - 4.2.2 JS中的全局變量
  - 4.2.3 JS中非嚴格模式下的的自動全局
  - 4.2.4 盡量不定義全局變量
  - 4.2.5 變量的有效期
- 4.3 方法
- - 4.3.1 對象屬性的調用
  - - 調用屬性
    - 調用方法
  - 4.3.2 this關鍵字
  - - 在JS中的applay()
五、内部對象
- 5.1 Date 日期時間對象
- - 5.1.1 建立Date對象的四種方式
  - - ①new Date():用目前時間和日期建立新的對象
    - ②new Date(year,month,...)指定日期和時間建立對象
    - ③new Date(String)
    - ④new Date(miliseconds)
  - 5.1.2 日期方法
- 5.2 JSON對象
- - 5.2.1 JSON了解
  - 5.2.2 執行個體化一個JSON對象
  - 5.2.3 JSON轉JS JSON.parse()
六、JavaScript中的OOP
- 6.1 面向對象原型繼承
- 6.1 面向對象class繼承
七、BOM 浏覽器對象模型
- 7.1 BOM中的window對象
- 7.2 Window Navigator(重要)
- 7.3 Window Screen
- 7.4 Window Location
- 7.5 Window History
八、DOM 文檔對象模型（重點）
- 8.1 獲得DOM節點
- - 通過标簽獲得節點
  - 通過ID獲得節點
  - 通過class獲得節點
  - 擷取所有子節點
  - 擷取指定子節點
- 8.2 更新DOM節點
- 8.3 删除節點
- 8.4 建立和插入節點

一、Javascript的基本知識

腳本語言百度百科

JavaScript曆史

javascript是一個非常流行的腳本語言，作為後端開發人員，應該精通JavaScript

ECMAScript

1997 年，JavaScript 1.1 作為一個草案送出給歐洲計算機制造商協會（ECMA）。第 39 技術委員會（TC39）被委派來“标準化一個通用、跨平台、中立于廠商的腳本語言的文法和語義”(http://www.ecma-international.org/memento/TC39.htm)。由來自 Netscape、Sun、微軟、Borland 和其他一些對腳本程式設計感興趣的公司的程式員組成的 TC39 錘煉出了 ECMA-262，該标準定義了名為 ECMAScript 的全新腳本語言。

在接下來的幾年裡，國際标準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為标準（ISO/IEC-16262）。從此，Web 浏覽器就開始努力（雖然有着不同的程度的成功和失敗）将 ECMAScript 作為 JavaScript 實作的基礎。

ECMAScript、DOM 和 BOM

盡管 ECMAScript 是一個重要的标準，但它并不是 JavaScript 唯一的部分，當然，也不是唯一被标準化的部分。實際上，一個完整的 JavaScript 實作是由以下 3 個不同部分組成的：

核心（ECMAScript）：描述了該語言的文法和基本對象。

文檔對象模型（DOM）：描述處理網頁内容的方法和接口。

浏覽器對象模型（BOM）：描述與浏覽器進行互動的方法和接口。

JavaScript 的核心 ECMAScript 描述了該語言的文法和基本對象；
DOM 描述了處理網頁内容的方法和接口；
BOM 描述了與浏覽器進行互動的方法和接口。

Javascript 初級——前端行為一、Javascript的基本知識二、入門三、 JS中的資料類型四、函數五、内部對象六、JavaScript中的OOP七、BOM 浏覽器對象模型八、DOM 文檔對象模型（重點）

二、入門

2.1 引入javascript

寫法一:内部标簽

直接在html的

<head>

标簽裡面寫

<head>
	...
	<script>
		//腳本語言
		...
	</script>
	...
</head>

寫法二：外部引用

js檔案：

//直接寫js代碼
...
...

在html檔案中引用

<script src=" js/index.js"></script>

一旦script标簽用于外部引用，就不能在裡面編寫代碼，即使編寫了，浏覽器也會忽略，如果需要寫，可以建立新的script标簽。

javascript語句會按照書寫順序依次執行

2.2 Javascript語言學習

javascript語言可以寫在head中的

script

标簽或body标簽中，或者寫在body标簽中，寫在body标簽中可以提高顯示速度，也可以寫在外部腳本檔案中

在外部檔案中放置腳本有如下優勢：

分離了 HTML 和代碼
使 HTML 和 JavaScript 更易于閱讀和維護
已緩存的 JavaScript 檔案可加速頁面加載

注釋：舊的 JavaScript 例子也許會使用 type 屬性：

注釋：type 屬性不是必需的。JavaScript 是 HTML 中的預設腳本語言。

<head>
    <meta charset="UTF-8">
    <title>我的javascript頁面</title>
    <!--外部引入-->
    <!--script标簽必須成對出現-->
    <script src="js/index.js" type="text/javascript"></script>
</head>

2.2.1 js彈窗方法 alert()

alert("hello!This is my first code for javascript!")

2.2.2 JavaScript輸出

JavaScript不提供任何

内建

的列印或顯示函數

2.2.2.1 document.write(String str)

在html頁面中輸出内容

document.write("This is a output by document.write() method.")

檢視網頁中的開發者工具

上圖說明，document.write(String str)可以向body中輸出一個内容

2.2.2.2 console.log() 向浏覽器控制台輸出内容

console.log("這是一個控制台輸出！")

控制台檢視結果

2.2.2.3 innerHTML 寫入HTML元素

2.2.3 js語言的書寫位置

body中

将js代碼編寫到标簽的 `onclick` 屬性中

隻有點選按鈕時，js代碼才會執行

<body>
    <button onclick="alert('您點選了按鈕')">點選按鈕，彈出警告框</button>
</body>

可以将js代碼編寫到a标簽的 `herf` 屬性中

<a href="javascript:alert('超連結的Javascript點選才會執行哦！')">超連結href屬性中的javascript</a>

雖然javascript語句可以寫在标簽的屬性中，但是他們屬于結構與行為耦合，不友善維護，不推薦使用，依然推薦外部引用。

2.3 Script基本文法

1、JS中嚴格區分大小寫；

2、JS中每一條語句以 ; 結尾，允許多條語句在一行

3、JS中會忽略空格，縮進和換行，但是為了增加程式可讀性，建議加上必要的空格

語句
var Person = "Bill" ;與語句 var Person="Bill";
是等價的

在運算符旁邊添加空格也是程式設計的好習慣

4、折行：為了達到最佳的可讀性，程式員們常常喜歡把代碼行控制在 80 個字元以内。

如果 JavaScript 語句太長，對其進行折行的最佳位置是某個運算符：
document.getElementById("demo").innerHTML = "Hello Kitty.";

2.3.1 JS中的關鍵字

關鍵詞	描述
break	終止 switch 或循環。
continue	跳出循環并在頂端開始。
debugger	停止執行 JavaScript，并調用調試函數（如果可用）。
do … while	執行語句塊，并在條件為真時重複代碼塊。
for	标記需被執行的語句塊，隻要條件為真。
function	聲明函數。
if … else	标記需被執行的語句塊，根據某個條件。
return	退出函數。
switch	标記需被執行的語句塊，根據不同的情況。
try … catch	對語句塊實作錯誤處理。
var	聲明變量。

注釋：JavaScript 關鍵詞指的是保留的單詞。保留詞無法用作變量名。

2.3.2 注釋

/*
	多行注釋，不會被執行
	可以在源代碼中檢視
*/

2.3.3 JavaScript值

2.3.3.1 混合值——字面量

一些不可改變的值如：數值：1、2、0.22；字元串"Bob boom",‘BOOM’

字面量可以直接使用，但是一般不會直接使用，會通過指派給變量的方式使用

2.3.3.2 變量值——變量

變量必須使用

var

聲明

聲明變量并給變量指派

var x;
x = 10;
var str = "some words"

2.3.4 辨別符命名規則

在大多數程式設計語言中，合法名稱的規則大多相同。
在 JavaScript 中，首字元必須是字母、下劃線（-）或美元符号（$）。
連串的字元可以是字母、數字、下劃線或美元符号。
辨別符不能是關鍵字
提示：數值不可以作為首字元。這樣，JavaScript 就能輕松區分辨別符和數值。
命名采用首字母小寫，每個單詞字母開頭大寫的 駝峰命名法 。
JavaScript 使用 Unicode 字元集。

Unicode 覆寫世界上幾乎所有的字元、标點和符号。

三、 JS中的資料類型

3.1 基本資料類型

類型名	注意事項
String 字元串	字元串可以是引号中的任意文本。可以使用單引号或雙引号：
Number 數值	JavaScript 隻有一種數字類型。不區分整數和小數；極大或極小的數字可以通過科學（指數）計數法來書寫：如果數字超過了最大值，就會傳回 `Indinity`
Boolean 布爾值	布爾（邏輯）隻能有兩個值：true 或 false。
Null 空值	專門用來表示為空的對象，隻有一個值 null`，typeof檢查類型為 Object``
Undifined 未定義	Undefined 這個值聲明但未指派。且隻含有一個值 `undefined` ，typeof類型檢查圍為 `undefined`

3.1.1 String 類型的基本運算

'use strict'
// js中的資料類型及相關說明
var str  = "I love China！";
//字元串基本運算 及傳回值解釋 傳回NaN表示，Not a Number
console.log(str * str);//NaN
console.log(typeof (str * str));//number
console.log(str / str);//NaN
console.log(typeof (str / str));//number
console.log(str + str);//I love China！I love China！
console.log(typeof (str + str));//string
console.log(str - str);//NaN
console.log(typeof (str - str));//number

輸出：

3.1.2 Number基本資料類型的運算和常量

JS中的數值運算

JS中的整數運算基本可以保證精确

JS中的浮點數運算，可能得到一個不精确的結果；是以不能使用JS進行對精确度有要求的運算

Number.MAX_VALUE 0以上的最大值

此常量表示js中可表示的最大值：

1.7976931348623157e+308

var num = Number.MAX_VALUE;
console.log("js中的可表示的最大的數值為："+num);

輸出

Number.MIN_VALUE 0以上的最小值

Number.MAX_VALUE

在js中表示0以上的最小值：

5e-324

Infinity 無窮

如果超出此JS中的最大值，傳回

Infinity

：無窮的

var num = Number.MAX_VALUE;
console.log("js中的可表示的最大的數值為：" + num);
console.log("一旦數值範圍超出MAX_VALUE傳回" + (num * num));

輸出

使用typeof檢查Infinity的類型依然傳回

number

；

NaN Not a Number

NaN是一個特殊 數字 ,表示 Not a Number ，
使用 typeof 擷取NaN的類型會傳回number。

3.2 引用資料類型

類型名	注意事項
數組類型	JS數組可以是不同類型的對象,用 `[]` 包起來,用arr.length()給數組指派，數組長度就會發生變化，JS中的操作數組的方法與Java相同
對象類型	用 `{...}` 包含,鍵值對描述屬性，多個屬性之間使用逗号隔開，最後一個屬性不帶逗号
Map
Set

取數組下标，如果越界了，不會報錯，會傳回

undefined

3.2.1定義一個數組類型和對象類型的變量

//數組類型
//引用資料類型
//數組類型
var array = [1,null,undefined,"xsaxsa"];
new Array(1,4,6,"ewqe");
//對象類型
var Person = {
    name:"Tom",
    age:12,
    scores:['ja','java','...']//最後一行不要待逗号，因為浏覽器存在相容問題
}

取對象的值

對象名.屬性名

Person.name;

使用一個不存在的對象，不會報錯，但會傳回``undefined```

對象的屬性可以動态的删除 delete 對象名.屬性名

對象的屬性可以動态添加：對象名.心屬性名：value

判斷對象中是否存在某屬性或方法： `xxx` in xxx

判斷一個屬性是否是這個對象自身擁有的，而非繼承得來的: hasOwnProperty(name)

3.2.2 Map

//JS中的Map
//定義一個Map，采用鍵值對的方式存放學生的姓名和年齡
'use strict'
var map = new Map([["Tom",12],["Tom",21],['Jerry',20],["Mony",12],["Shary",26],["Sofeiya",15]])
//通過key獲得value
console.log(map.get("Tom"));
//通過key設定value
console.log(map.set("Tom",14));
//删除指定鍵值的元素
map.delete("Mony");

輸出

21
Map(5) {
  'Tom' => 14,
  'Jerry' => 20,
  'Mony' => 12,
  'Shary' => 26,
  'Sofeiya' => 15
}

3.2.3 Set

無序不重複集合

var set = new Set([1,2,4,3,4,6,2]);//Set會去重
//向set中添加資料
console.log(set.add(2));
//判斷set中是都包含指定值
console.log(set.has(6))
//删除set中的值
set.delete(3);

3.3 JS中的強制類型轉換

3.3.1 其他類型轉String

調用被轉換類型的 toString() 方法，方法不會影響原變量的值

注意：null和undefined這兩種值沒有toString方法(),但可以調用String()函數,參數為要轉換的資料

對于Number和Boolean調用String()函數，實際上底層還是使用了toString()方法，對于null和undifined，是直接把 null 和 undefine 轉換為 "null" 和 "undefined"

3.3.2 其他類型轉Number類型

使用Number()函數，參數為要轉換的原資料

原來類型	轉換後結果
純數字的字元串	純數字
含非數字的字元串	NaN
undefined	NaN
null
true	1
false

console.log(Number('ADS'));
console.log(Number('123456'));
console.log(Number(null));
console.log(Number(false));
console.log(Number(true));
console.log(Number(undefined));

輸出：

NaN
123456
0
0
1
NaN

Number針對于String類型的轉換：paresInt(),parseFloat()

paresInt()：将一個字元串中的 有效 整數取出

paresFloat()：将一個字元串中有效的浮點數部分取出

console.log(parseInt("123.123132abcd456"));
console.log(parseFloat("1223.123sfdsfd.4564.45"))

輸出：

123
1223.123

3.3.3 其他類型轉Boolean類型 Boolean()函數

轉換類型	轉換結果
Number	除了 0 和 NaN 其餘的都是true
String	空串時為false
null	false
undefined	false
Object	true

3.4 typeof 檢查變量類型

var str = "acacs";
var a = 10;
console.log(typeof str);
console.log(typeof a);

輸出

3.5 JS中其他進制數字的表示

進制	表示
二進制	`0b` 1010：以0b開頭
八進制	107：以0開頭
十六進制	`0x` 10：以0x開頭

注意：像”070“這種字元串有些浏覽器會當初十進制進行解析，有些會當初八進制解析

解決辦法:

parseInt(str,要使用的進制)

3.6 JS中的運算符

JS中的運算的的相關知識于Java中大部分相似，少部分細節有調整，但影響不大。是以此部分省略。

需要注意：

在JS中 == 來判斷相等，類型不一樣，值一樣，也會判定為true

=== 才能表示絕對等于，NaN于所有的數值都不想等，包括自己，隻能用 isNaN() 來判斷一個數值是否為NaN；

JS中盡量避免使用浮點數運算，因為存在精度問題。

3.7 浏覽器控制台的使用

我們可以直接在浏覽器控制台中，對js檔案進行調試debug

3.8 嚴格檢查模式strict

使用前提——；IDEA需要設定支援ES6文法

嚴格模式通過在腳本或函數的

頭部

添加

use strict

; 表達式來聲明。

為什麼使用嚴格模式:

消除Javascript文法的一些不合理、不嚴謹之處，減少一些怪異行為;
消除代碼運作的一些不安全之處，保證代碼運作的安全；
提高編譯器效率，增加運作速度；
為未來新版本的Javascript做好鋪墊。

使用嚴格檢查前

使用嚴格檢查後

3.9 JS中的流程控制語句

js中的流程控制與Java類似，不同主要在循環控制中，下面是js中與Java不同的新的for循環寫法

3.9.1 forEach()

//JS中的大部分的流程控制與Java是相同的，但是foreach循環有所差別
var arr = [1,undefined,654,5,6,8,34,"hfee",null]

//變量arr數組
arr.forEach(function (value){
    console.log(value)
})

3.9.3 for-of

周遊數組

var arr = [1,4,5];
for(let x of arr){
	console.log(x)
	}

周遊Map

var map = new Map([1,'A'],[2,'B'],[3,'C'],[4,'D'])
for(let x of map){
		console.log(x)
		}

周遊Set

var set = new Set(1,43,34,72,1)
for(let x of set){
		console.log(x)
		}

3.9.2 for-in

//for...in
for(let num in arr){
    if(arr.hasOwnProperty(num)){
        console.log("存在")
        console.log(arr[num])
    }
}

let 與 const

ES2015 引入了兩個重要的 JavaScript 新關鍵詞：

let

和

const

。

局部變量，建議都使用

let

去定義

四、函數

4.1、定義函數

一旦return，代表函數結束，如果函數内部有沒有return，執行完函數也會傳回結果，結果就是undefined

4.1.1 方式一、

function 函數名(參數){
	...
return；
	}

例子，求和函數

//定義函數
function sum(x,y){
    //一旦return，代表函數結束，如果函數内部有沒有return，執行完函數也會傳回結果，結果就是undefined
    return x+y;
    
}

//函數調用
sum(2,3);

4.1.2 方式二、

給定兩數求最大值

//方式二
var getBigger = function (num1,num2) {
    return (num1>num2)?num1:num2;
}
console.log(getBigger(12,32));

4.1.3、函數參數問題

不含參數

因為在JS中如果不給含參數的函數傳參數，最會傳回

undefined

但在開發中，我們希望能得到異常，是以這裡需要我們手動抛出異常

if (typeof (getBigger()) !== 'number'){
    throw 'Not a Number' ;
}

含多個參數的問題—— `arguments` 重點

在JS中，可以傳給函數無數個參數，但是，對于參數是一個數的函數，隻會使用傳過來的第一個值，其餘參數不會用但是依然存在，為了擷取這些存在但是沒有作用的參數，我們可以使用

arguments

去得到

arguments

是一個JS免費贈送的關鍵字，代表了一個包含了傳遞給函數的所有參數的數組

var getBigger = function (num1,num2) {
    let max =(num1>num2)?num1:num2;
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    return max;
}

控制台調試輸出

新特性; `rest`

與arguments直接擷取所有參數相比，rest可以擷取除了定義的參數之外的所有參數

function func(a,b,...rest){
		console.log('a='+a);
		console.log('b='+b);
		console.log(rest);
	}

控制台測試輸出

注意事項：rest參數隻能寫在最後面，必須用

...

辨別。

4.2 變量的作用域

JS中有兩種作用域類型： 局部作用域 ， 全局作用域 ；

JavaScript實際上隻有一個全局作用域，任何變量(函數也可以視為變量),假設沒有在函數作用範圍内找到，就會向外查找，如果在 全局作用域 都沒有找到就會會報錯 ReferanceError

規範：由于所有的全局變量都會綁定到windows上，如果不同的js檔案使用了相同的全局變量，就會産生沖突。

内部函數可以通路外部成員；

函數内部定義的變量從函數外部是不可通路的（不可見的）。

如果内部函數存在與外部函數同名的變量，内部函數會從内向外查找，内部函數會屏蔽外部函數的變量。

所有的變量定義都放在函數頭部，便于代碼維護。

4.2.1 JS中的局部變量

局部變量函數體内的變量對外是不可通路的

建議使用let定義局部變量

//函數體外不可使用局部變量a
function func1() {
   let a = 1;
   //函數體内可以使用局部變量a
}
console.log(a);

4.2.2 JS中的全局變量

ES6新增：const定義常量，const定義的常量是不可修改的

函數之外聲明的變量都是全局變量
全局變量的作用域是全局的：網頁的所有腳本和函數都能夠通路它。
預設所有的全局變量都會自動綁定在window對象下

var str = 'lasa';
function print(){
   console.log('functionPrint:'+str);
}
print();
console.log(str);

浏覽器控制台輸出：

4.2.3 JS中非嚴格模式下的的自動全局

在非嚴格模式中：如果給沒有聲明過的變量指派，那麼改變量會自動聲明為全局變量

//3、JS中的自動全局：沒有被聲明過的變量，一旦被指派自動聲明為全局變量
function func2() {
   str1 = '沒有被聲明的變量；';
}
func2();
console.log(str1);

浏覽器控制台輸出

4.2.4 盡量不定義全局變量

除非有意為之，否則請勿建立全局變量。
您的全局變量（或函數）能夠覆寫 window 變量（或函數）。
任何函數，包括 window 對象，能夠覆寫您的全局變量和函數。

全局變量使用沖突解決辦法：

把自己的代碼放入唯一定義的空間名字中，如下：

var scnusStudents = {};//自定義的唯一全局變量
scnusStudents.schoolName = '四川師範大學';
scnusStudents.numberOfStudent = 100000;
scnusStudents.add = function (sno,sname) {
   return "新添加的學生為"+sname;
}

4.2.5 變量的有效期

JavaScript 變量的有效期始于其被建立時。
局部變量會在函數完成時被删除。
全局變量會在您關閉頁面是被删除。

4.3 方法

方法是作為屬性存儲在對象内部的函數

示例：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

4.3.1 對象屬性的調用

調用屬性

對象名.屬性名

調用方法

對象名.方法名()

:調用方法一定要帶括号，如果不使用括号，會傳回函數定義内容

4.3.2 this關鍵字

在函數定義中，this 引用該函數的“擁有者”。
在上面的例子中，this 指的是“擁有” fullName 函數的 person 對象。
換言之，this.firstName 的意思是 this 對象的 firstName 屬性。
與Java中相同，在目前對象中使用this，可以調用目前對象的屬性。

在JS中的applay()

applay()可以指定調用方法的對象

函數名.applay(對象名，參數清單)

執行個體

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

在上述代碼中，

fullName

方法被指定應用到對象person1上。

五、内部對象

5.1 Date 日期時間對象

5.1.1 建立Date對象的四種方式

①new Date():用目前時間和日期建立新的對象

'use strict'
var date1  = new Date();

②new Date(year,month,…)指定日期和時間建立對象

7個數字分别指定年、月、日、小時、分鐘、秒和毫秒（按此順序）
不能省略月份。如果隻提供一個參數，則将其視為毫秒。

let date2 = new Date(2021,10,3);

③new Date(String)

從日期字元串建立一個新的日期對象

//從日期字元串闖将新的日期對象
        let date3 = new Date("October 13, 2014 11:13:00");

④new Date(miliseconds)

建立一個零時(格林尼治1970年1月1日0時0分0秒，中原標準時間上午8點)

//建立一個零時加毫秒的新時間對象
        let date4 = new Date(3135465416546);

5.1.2 日期方法

方法	作用
擷取年	getFullYear()
擷取月	getMonth() 0-11
擷取星期	getDay()
擷取日	getDate()
擷取時	getHours()
擷取分	getMinutes()
擷取秒	getSeconds()
擷取時間戳	getTime()
将日期轉換成更易讀的形式	toDateString()
将日期轉換為 UTC 字元串	toUTCString

5.2 JSON對象

5.2.1 JSON了解

百度百科對JSON的定義：

JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的資料交換格式。
它基于 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，采用完全獨立于程式設計語言的文本格式來存儲和表示資料。
簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。

JSON就是一個可以被任何語言識别并轉換為任意語言對象的特殊格式的字元串

JSON用于JS與其他語言的伺服器進行對象資料傳輸，但是不一樣的語言，對于對象的定義是不同的，但是每一種語言都能識别字元串，是以就采用特殊格式的字元串的方式來傳輸資料。

JSON的作用：

交換資料：
當資料在浏覽器與伺服器之間進行交換時，這些資料隻能是文本。

JSON 屬于文本，并且我們能夠把任何 JavaScript 對象轉換為 JSON，然後将 JSON 發送到伺服器。

我們也能把從伺服器接收到的任何 JSON 轉換為 JavaScript 對象。

以這樣的方式，我們能夠把資料作為 JavaScript 對象來處理，無需複雜的解析和轉譯。

發送資料
資料存儲在 JavaScript 對象中，可以把該對象轉換為 JSON，然後将其發送到伺服器。

5.2.2 執行個體化一個JSON對象

JSON文法：

資料在名稱/值對中
資料由逗号分隔
花括号容納對象
方括号容納數組
JSON資料鍵值對的方式；鍵必須是字元串且用雙引号包圍

執行個體化兩個JS對象

<!--兩個JS對象-->
    student1 = {
        name:"Tom",
        age: 19,
        score:([["math",99],["Java",98],["C#",97],["Python",98]])
    }
    sudent2 = {
        name:"Jimi",
        age: 21,
        score:([["math",98],["Java",87],["C#",65],["Python",79]])
    }

手動将上述JS對象轉換為JSON對象

//轉換原則：對象用{}包圍，數組用[]包圍，對象内的屬性名使用雙引号包圍
    var obj = '[{"name":"Tom", "age": 12, "score":[[["math",12],["Java",98],["C#",97],["Python",98]]]},' +
              '{"name":"Jimi", "age": 21, "score":[[["math",98],["Java",87],["C#",65],["Python",79]]]}]'

使用方法将JS對象轉換為JSON對象:JSON.stringify()

JSON.stringify(value[, replacer[, space]])

value:

必需，要轉換的 JavaScript 值（通常為對象或數組）。

replacer:

可選。用于轉換結果的函數或數組。

如果 replacer 為函數，則 JSON.stringify 将調用該函數，并傳入每個成員的鍵和值。使用傳回值而不是原始值。如果此函數傳回 undefined，則排除成員。根對象的鍵是一個空字元串：""。

如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。

space:

可選，文本添加縮進、空格和換行符，如果 space 是一個數字，則傳回值文本在每個級别縮進指定數目的空格，如果 space 大于 10，則文本縮進 10 個空格。space 也可以使用非數字，如：\t。

JSON.stringify([student1,student2])

輸出

"[{\"name\":\"Tom\",\"age\":19,\"score\":[[\"math\",99],[\"Java\",98],[\"C#\",97],[\"Python\",98]]},{\"name\":\"Jimi\",\"age\":21,\"score\":[[\"math\",98],[\"Java\",87],[\"C#\",65],[\"Python\",79]]}]"

5.2.3 JSON轉JS JSON.parse()

将上述JSON使用JSON.parse()

JSON.parse(obj);

六、JavaScript中的OOP

6.1 面向對象原型繼承

現有一對象student，内有屬性id，name，age，test()方法

var student = {
            id : '0001',
            name : "name",
            age : 0,
            test:function (){
                console.log(this.name+"正在參加考試")
            }
        }

現在希望建立一個對象，能繼承student中的屬性和方法

對象名.__proto__=父對象名

var Bob = {
            id:'0002'
        }
        Bob.__proto__=student;
        Bob.name = "Bob";
        Bob.test();

6.1 面向對象class繼承

class

關鍵字是在ES6中引入的

建立Person對象：

//面向對象class繼承，ES6新引入的關鍵字
        class Person{
            constructor(name) {
                this.name = name;
            }
            //方法
            hello(){
                alert('hello')
            }
        }
       //建立一個Person的對象
        var Jack = new Person('Jack');
        Jack.hello();

建立對象繼承Person對象，與Java類似

//建立一個新對象，繼承Person
        class Teacher extends Person{
            //可以繼續使用父類的構造器和方法屬性
            // constructor() {
            //     super();
            // }
            //也可重修寫不同的構造器,構造器隻能有一個
            constructor(name,age) {
                super(name);
                this.age = age;
            }
        }
        var headteacher = new Teacher("校長");
        var mathteacher = new Teacher("數學老師",25);
        headteacher.hello();
        mathteacher.age;

面向class對象的程式設計的本質依然是面向原型程式設計

七、BOM 浏覽器對象模型

BOM（Browser Object Model）：BOM由多個對象組成，頂層對象為window，其餘對象都是window的子對象

JavaScript和浏覽器的關系？

*　JavaScript的誕生就是為了讓它能在浏覽器上運作

*　通過操作BOM對象，我們可以對浏覽器進行操作

7.1 BOM中的window對象

是以的浏覽器都支援window對象，它代表浏覽器視窗。
所所有JS全局對象，函數一級變量均自動成為window對象
全局變量是window的屬性
全局函數是window的方法

window.alert("這是一個彈窗");
        //浏覽器的内部高度和狂賭，包括滾動條
        //Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
        window.innerHeight;
        window.innerWidth;

        //浏覽器的外部高度和寬度
        window.outerHeight;
        window.outerWidth;
        
        window.open() - 打開新視窗
        window.close() - 關閉目前視窗
        window.moveTo() - 移動目前視窗
        window.resizeTo() - 調整目前視窗的尺寸

7.2 Window Navigator(重要)

window.navigator對象包含有關通路者的資訊

window.navigator

：使用時可以省略window

navigator部分屬性：

cookieEnabled ：傳回true，如果cookie已啟用，傳回false
appName ：傳回浏覽器的應用程式名稱
appCodeName ：傳回應用程式代碼名稱，“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的應用程式代碼名稱。
product ：傳回浏覽器引擎的産品名稱。
appVersion ：傳回有關浏覽器的版本資訊
userAgent ：傳回由浏覽器發送到伺服器的使用者代理報頭
注意

來自 navigator 對象的資訊通常是誤導性的，不應該用于檢測浏覽器版本，因為：

不同浏覽器能夠使用相同名稱

導航資料可被浏覽器擁有者更改

某些浏覽器會錯誤辨別自身以繞過站點測試

浏覽器無法報告釋出晚于浏覽器的新作業系統
platform ：傳回浏覽器平台(作業系統)
language ：傳回浏覽器語言
onLine ：傳回布爾值，判斷浏覽器是否線上
jaavEnabled() ：方法傳回Java是否啟用。

7.3 Window Screen

使用window.screen時可以省略window

screen常用屬性：

screen.weight:：傳回目前螢幕的寬度
screen.height:：傳回目前螢幕的高度
screen.availWidth：傳回目前螢幕的寬度，減去工具條等頁面特征
screen.availHeight:：傳回目前螢幕的高度，減去工具條等頁面特征
screen.colorDepth：傳回色深
screen.pixelDepth：傳回螢幕的像素深度

7.4 Window Location

window.location 對象可用于擷取目前頁面位址（URL）并把浏覽器重定向到新頁面。

window.location也可以省略window，locatino中的很多屬性和方法是不建議使用的

location常用屬性

href ：傳回目前頁面的href(URL)
hostname / host ：傳回web主機的域名
pathname ：傳回目前頁面的路徑或檔案名
protocol ：傳回使用的web協定（http:或https:）
assign ：加載新文檔

7.5 Window History

window.history對象包含浏覽器曆史

window.history可以不帶window使用

部分方法

back() ：等于點選浏覽器回退按鈕
forward(0 ：等同于點選浏覽器前進按鈕

八、DOM 文檔對象模型（重點）

浏覽器網頁就是一個Dom樹型結構

主要操作

更新
周遊dom節點
删除dom節點
添加新節點

要操作一個Dom節點就必須獲得這個結點

8.1 獲得DOM節點

通過标簽獲得節點

var h1  = document.getElementsByTagName('h1');

通過ID獲得節點

var p2 = document.getElementById('p2');
var father = document.getElementById('father');

通過class獲得節點

var p1 = document.getElementsByClassName('p1');

擷取所有子節點

var children = father.children;

擷取指定子節點

//第一個子節點
var firstChild = father.firstChild;
//最後一個子節點
var lastChild = father.lastChild;

8.2 更新DOM節點

方法	描述
element.innerHTML = new html content	改變元素的 inner HTML
element.attribute = new value	改變 HTML 元素的屬性值
element.setAttribute(attribute, value)	改變 HTML 元素的屬性值
element.style.property = new style	改變 HTML 元素的樣式

操作文本

//修改文本值
p2.innerText = 'p2 has been changed';
//修改html元素
p2.innerHTML = '<strong>123</strong>';

操作JS

//操作文本
//修改文本值
p2.innerText = 'p2 has been changed';
//修改html元素
p2.innerHTML = '<strong>123</strong>';

//操作CSS

p2.style.color = 'red';
p2.style.fontSize = '20px';
p2.style.padding = '2em';

8.3 删除節點

通過父節點删除子節點

//删除節點
//1、擷取要删除的節點
let self = document.getElementById('p2');
//2、通過delf得到父節點
let father = self.parentElement;

//3、删除子節點
father.removeChild('p1');

8.4 建立和插入節點

如果原DOM節點是空的，就可以通過innerHTML增加一個元素。inner HTML會覆寫原來的内容。

更好的方式是在原來的内容上新增節點

方法	描述
document.createElement(element)	建立 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替換 HTML 元素
document.write(text)	寫入 HTML 輸出流

建立一個p标簽

//建立p标簽
var newp = document.createElement('p');
newp.id = 'newp';
newp.innerText = 'this is a new element'
//追加p标簽到list下
list.appendChild(newp);

追加：

//追加
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

Javascript 初級——前端行為一、Javascript的基本知識二、入門三、 JS中的資料類型四、 函數五、 内部對象六、JavaScript中的OOP七、BOM 浏覽器對象模型八、DOM 文檔對象模型（重點）