JavaScript的初步學習

JavaScript簡介

主要特點

主要用途

JavaScript的基本特性

?JavaScript的引入方式

1. 內聯方式 (Inline JavaScript)

2. 內部方式 (Internal JavaScript / Embedded JavaScript)

3. 外部方式 (External JavaScript)

JavaScript的語法介紹

1.書寫語法

?2.輸出語句

3.變量

?（1）變量的聲明關鍵詞

a.?var

b.?let

c.?const

（2）?變量的命名規則

（3）?變量的作用域

（4）?變量的提升（Hoisting）

?4.數據類型

（1）基本數據類型（原始類型）

a. 數字（Number）

b. 字符串（String）

c. 布爾值（Boolean）

d.?undefined

e.?null

f. Symbol（符號）

（2）復雜數據類型（引用類型）

a. 對象（Object）

b. 數組（Array）

c. 特殊對象：Date,?RegExp,?Error等

（3）類型轉換

a. 轉字符串

b. 轉數字

?c. 轉布爾值

（4）值得注意的細節

a.?typeof運算符

b.instanceof

5.運算符

?6.流程控制語句

7.函數

（1）函數的定義方式

a.函數聲明（Function Declaration）

b.函數表達式（Function Expression）?

c.箭頭函數（Arrow Function）?

（2）函數參數的語法和細節

a.?默認參數（Default Parameters）

b.?剩余參數（Rest Parameters）

c.?參數解構（Destructuring）

（3）函數作用域與閉包

a.?作用域

b.?閉包

（4）函數的this綁定規律

a.?普通函數

b.?箭頭函數

c.?更復雜的綁定規則

（5）函數的返回值

（6）生成器函數（Generator Functions）

?8.對象

（1）常用對象

?（2）自定義對象

a. 對象的創建方式

?對象字面量（Object Literal）- 最常用

new Object()?構造函數

構造函數（Constructor Function）- 創造類實例的“模板”

使用原型（Prototype）優化構造函數 - 共享方法

ES6?class?語法 - 現代JS推薦的面向對象方式

b. 訪問和修改對象屬性/方法

點表示法（Dot Notation）

方括號表示法（Bracket Notation）

c. 刪除對象屬性

d. 檢查屬性是否存在

in?運算符

hasOwnProperty()?方法

e. 遍歷對象屬性

for...in?循環

Object.keys()

Object.values()

Object.entries()

f. 短屬性名和短方法名（ES6）

g. 計算屬性名（Computed Property Names）（ES6）

9.JSON

（1）什么是JSON

（2）JSON的語法規則

a.基本結構

b.JSON對象（Object）

c. JSON數組（Array）

d. 數值（Number）

e. 字符串（String）

f. 布爾值（Boolean）

g. null值?

h. 不能出現

（3）在JavaScript中操作JSON

a.轉換為JSON字符串：JSON.stringify

b. 解析JSON字符串：JSON.parse

（4）擴展：自定義對象轉JSON的細節

?10.BOM

（1）什么是BOM？

（2）BOM的核心對象和功能

（3）BOM的常用對象及使用細節

a.?window對象

b.?location對象

c.?history對象

d.?navigator對象

e.?screen對象

f. 定時器函數

（4）彈窗相關函數

（5）瀏覽器寬高與窗口操作

a.?innerWidth?和?innerHeight

b.?outerWidth?和?outerHeight

c.?resize事件

d. 彈出新窗口（或標簽頁）

e. 控制窗口大小與位置

?11.DOM

（1）什么是DOM

（2）DOM的基本結構

（3）常用的DOM操作語法和細節

a. 訪問元素

b. 修改元素

c. 創建新元素?

d. 刪除元素

e. 事件綁定

f. 其他常用操作

（4）DOM操作的細節注意點

（5）示例

JavaScript簡介

JavaScript（簡稱JS）是一種廣泛使用的動態腳本語言，主要用于網頁開發，賦予網頁動態交互功能。它由網景公司（Netscape）的布蘭登·艾奇（Brendan Eich）在1995年開發，最初名為LiveScript，后來改名為JavaScript。

主要特點

客戶端腳本：主要在瀏覽器中執行，使網頁具有動態效果和交互能力（如表單驗證、動畫、實時更新內容等）。
動態類型：變量類型在運行時確定，不需要預定義。
弱類型：類型轉換自動進行，使用靈活。
事件驅動：響應用戶操作（點擊、懸停、提交等）。
多范式：支持面向對象、函數式、命令式編程。

主要用途

網頁交互：實現按鈕點擊、表單驗證、動畫效果。
網頁開發框架：如React、Vue、Angular。
服務器端編程：通過Node.js，JavaScript還能在服務器執行。
移動應用：如React Native。
桌面應用、游戲開發：通過特殊平臺和引擎實現。

JavaScript的基本特性

簡潔靈活的語法：類似C、Java的語法，但比它們簡單易用。
原生支持事件處理：可以直接在HTML或JavaScript中綁定事件。
DOM操作：可以直接操作網頁結構（Document Object Model）。
異步編程：支持Promise、async/await等技術，方便處理異步任務。

?JavaScript的引入方式

1. 內聯方式 (Inline JavaScript)

概念：?將JavaScript代碼直接作為HTML標簽的屬性值使用。通常用于處理特定的事件，例如點擊按鈕時執行一段JS代碼。

優點：

簡單直接，適用于非常短小、針對特定元素的邏輯。
無需額外的文件或<script>標簽。

缺點：

極其不推薦！?嚴重違反了結構（HTML）、樣式（CSS）、行為（JavaScript）分離的原則。
代碼可讀性差，難以維護。
代碼復用性差。
增加了HTML文件的體積。

<!DOCTYPE html>
<html>
<head><title>內聯JavaScript示例</title>
</head>
<body><button onclick="alert('你點擊了我，內聯方式！');">點擊我</button><a href="#" onmouseover="this.style.color='red';"onmouseout="this.style.color='black';">鼠標懸停</a>
</body>
</html>

2. 內部方式 (Internal JavaScript / Embedded JavaScript)

概念：?將JavaScript代碼放置在HTML文件的<script>標簽內部。<script>標簽可以放在HTML文檔的<head>部分，也可以放在<body>部分。

優點：

代碼都在一個HTML文件中，方便小型項目或單頁面應用。
避免了額外的HTTP請求。

缺點：

不利于代碼復用。如果多個HTML頁面需要相同的JavaScript代碼，就需要復制代碼。
增加了HTML文件的體積，下載時需要加載整個JS代碼。
如果JS代碼量很大，可能會阻塞頁面內容的渲染（尤其是放在<head>里）。

建議放置位置：?通常推薦將?<script>?標簽放置在?<body>?標簽的閉合標簽?</body>?之前。這樣做的原因是：

避免阻塞渲染：?瀏覽器在解析HTML時，遇到?<script>?標簽會暫停HTML的解析和渲染，轉而去下載和執行JavaScript代碼。如果JavaScript在頁面的頂部（<head>中）且代碼量較大，用戶可能會看到空白頁面的時間延長。
確保DOM可用：?JavaScript代碼通常需要操作HTML元素（DOM）。如果JavaScript在元素加載之前就執行，可能會找不到要操作的元素，導致錯誤。將JavaScript放置在?</body>?之前，可以保證它執行時，頁面上的所有HTML元素已經被瀏覽器解析并創建為DOM樹。

<!DOCTYPE html>
<html lang="zh-CN">
<!-- HTML文檔的語言設置為中文 -->
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>內部JavaScript示例</title><script>// 這是放置在 head 標簽內的 JavaScript 代碼function showHeadMessage() {console.log("這是來自 head 標簽內的 JavaScript。");}</script>
</head>
<body><h1>內部JavaScript</h1><p id="myParagraph">這是一個段落。</p><button onclick="changeText()">點擊改變段落</button><script>// 這是放置在 body 標簽末尾的 JavaScript 代碼function changeText() {document.getElementById("myParagraph").innerText = "段落內容已被JavaScript改變！";}// 頁面加載完成后執行window.onload = function() {showHeadMessage(); // 調用 head 中的函數console.log("頁面已加載完成，這是來自 body 標簽末尾的 JavaScript。");};</script>
</body>
</html>

3. 外部方式 (External JavaScript)

概念：?將JavaScript代碼單獨保存在一個.js文件中，然后在HTML文件中通過<script>標簽的?src?屬性引入。

優點：

最推薦的方式！?實現了結構、樣式、行為的完全分離，代碼清晰，易于維護。
代碼復用性高：?多個HTML頁面可以引用同一個.js文件，避免重復編寫代碼。
瀏覽器緩存：?.js文件可以被瀏覽器緩存，當用戶再次訪問或訪問其他頁面時，無需重新下載，加快頁面加載速度。
優化加載性能：
- 可以使用?defer?屬性：腳本會延遲到文檔解析完成后才執行，但會按照它們在文檔中出現的順序執行。不會阻塞HTML解析。
- 可以使用?async?屬性：腳本會異步加載，并在加載完成后立即執行，不保證執行順序，也會阻塞HTML解析（但只在腳本下載期間）。
- 推薦：將?<script>?標簽放在?</body>?閉合標簽之前。

缺點：

增加了一個HTTP請求（但可以通過瀏覽器緩存彌補）。

// script.js
function sayHello() {alert("你好，這是來自外部JavaScript文件！");
}
function updateDiv() {document.getElementById("messageDiv").innerText = "外部JS已修改此內容。";
}
// 頁面加載完成后執行
window.onload = function() {console.log("外部JavaScript文件已加載并執行。");
};

<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部JavaScript示例</title><!-- 推薦使用 defer 或放在 body 底部 --><script src="script.js" defer></script>
</head>
<body><h1>外部JavaScript</h1><p>這是來自HTML頁面的內容。</p><div id="messageDiv">原始內容</div><button onclick="sayHello()">點擊問候</button><button onclick="updateDiv()">更新內容</button>
</body>
</html>

JavaScript的語法介紹

1.書寫語法

?2.輸出語句

3.變量

?（1）變量的聲明關鍵詞

JavaScript中聲明變量主要使用三種關鍵詞：var、let和const。這三者在作用域、可變性等方面存在差異。

a.?`var`

最早的變量聲明方式。
作用域為函數作用域（函數內部有效，函數外面不可見）；
可以重復聲明同一變量，后聲明會覆蓋前面。

b.?`let`

ES6（ECMAScript 2015）引入。
作用域為塊作用域（比如在if、for、while塊內有效）；
不允許重復聲明同一變量。

c.?`const`

也是ES6引入。
作用域為塊作用域；
必須初始化，聲明后不可再賦值；
對于對象和數組，雖然引用不可變，但對象內容還是可變的。

（2）?變量的命名規則

只能以字母、$、_開頭；
后續可以使用字母、數字、$、_；
不能使用JavaScript關鍵字（如if,?var,?function等）作為變量名；
推薦命名具有描述性（語義清晰）。

（3）?變量的作用域

var聲明的變量：函數作用域或全局作用域（如果在函數外部聲明）
let和const聲明的變量：塊作用域（例如在if、for、while內有效）

（4）?變量的提升（Hoisting）

var聲明的變量會提升：變量聲明會被提升到作用域頂部，但賦值不會。
let和const不會提升，會在塊內形成“暫時性死區（TDZ）”，訪問會報錯。

console.log(x); // undefined，因為var會提升聲明
var x = 5;console.log(y); // 報錯：Cannot access 'y' before initialization
let y = 10;console.log(z); // 報錯：Cannot access 'z' before initialization
const z = 15;

?4.數據類型

（1）基本數據類型（原始類型）

a. 數字（Number）

表示整數和浮點數。
JavaScript中的數字采用雙精度浮點（IEEE 754標準）。
特殊值：Infinity,?-Infinity,?NaN（非數字）

let integerNum = 42;           // 整數
let floatNum = 3.1415;         // 浮點數
let infinity = Infinity;       // 正無窮
let nanValue = NaN;              // 非數字

?注意：NaN表示“非數值”，且NaN本身不等于任何值，包括自己。

console.log(NaN === NaN); // false
console.log(isNaN(NaN));   // true

b. 字符串（String）

用單引號''或雙引號""（也支持反引號?``）表示。
支持轉義字符和模板字符串。

let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello, ${str2}!`; // 模板字符串，支持插值

c. 布爾值（Boolean）

只有兩個值：true?和?false。

d.?`undefined`

表示變量未定義或未賦值。

e.?`null`

表示“空值”，需要顯式賦值。

f. Symbol（符號）

在ES6引入。
用于創建唯一的標識符。

const sym1 = Symbol('foo');
const sym2 = Symbol('foo');
console.log(sym1 === sym2); // false，符號唯一

（2）復雜數據類型（引用類型）

a. 對象（Object）

鍵值對集合，屬性名為字符串（或Symbol），值可以為任何類型。
字面量定義

let obj = {name: 'Alice',age: 25,greet: function() { return 'Hello'; }
};

b. 數組（Array）

數對象的特殊類型，存儲有序元素。

let arr = [1, 2, 3, 'a', true];

c. 特殊對象：`Date`,?`RegExp`,?`Error`等

let dateNow = new Date();
let regex = /ab+c/;

（3）類型轉換

JavaScript會在需要時自動進行類型轉換（隱式轉換），也可以手動轉換。

a. 轉字符串

String(123);       // '123'
(123).toString();  // '123'

b. 轉數字

Number('456');     // 456
parseInt('123', 10);  // 123
parseFloat('3.14');   // 3.14
parseInt('12abc');   //12
parseInt('abc');   //NaN

?c. 轉布爾值

Boolean(0);       // false
Boolean('');      // false
Boolean('hello'); // true
Boolean(undefined); // false

注意：?以下值在轉換為布爾值時為false，稱為“假值”或“false值”：

false
0
-0
0n（BigInt零）
null
undefined
NaN
空字符串?''

其他值為真（true）。

（4）值得注意的細節

a.?`typeof`運算符

用來判斷變量的數據類型。

typeof 123;             // 'number'
typeof 'hello';         // 'string'
typeof true;            // 'boolean'
typeof undefined;       // 'undefined'
typeof null;            // 'object'（這是一個歷史遺留問題，null實際上是原始類型）
typeof Symbol('foo');     // 'symbol'
typeof {a:1};           // 'object'
typeof [1,2,3];         // 'object'（數組也是對象）
typeof function(){};    // 'function'（函數也是對象的一種）

`b.instanceof`

判斷對象是否是某個類的實例。

let arr = [1,2,3];
console.log(arr instanceof Array); // true
console.log({} instanceof Object); // true

5.運算符

?6.流程控制語句

和Java相近。

7.函數

（1）函數的定義方式

a.函數聲明（Function Declaration）

function 函數名(參數列表) {// 函數體
}

特點：

函數會被提升（hoisted），可以在聲明之前調用。
適合定義在代碼頂層或塊內的標準函數。

b.函數表達式（Function Expression）?

const func = function(參數) {// 函數體
};

特點：

不會被提升，只能在聲明后使用。
通常用作回調函數。

c.箭頭函數（Arrow Function）?

const func = (參數) => {// 函數體
};

特點：

語法簡潔，尤其適合寫短函數。
不綁定自己的this，常用于回調或匿名函數。

（2）函數參數的語法和細節

a.?默認參數（Default Parameters）

function greet(name='Guest') {console.log('Hello, ' + name);
}
greet(); // 'Hello, Guest'

b.?剩余參數（Rest Parameters）

收集多余參數為數組：

function sum(...numbers) {return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

c.?參數解構（Destructuring）

解構數組或對象參數：

function display({name, age}) {console.log(name, age);
}
display({name: 'Alice', age: 30});

（3）函數作用域與閉包

a.?作用域

函數定義的變量在函數內部有效，外部不可訪問（除非返回或傳遞）。
函數內部可以訪問外部作用域。

b.?閉包

函數配合其定義環境形成閉包，能“記住”當時的作用域。

function outer() {let count = 0;return function inner() {count++;console.log(count);}
}
const increment = outer();
increment(); // 1
increment(); // 2

（4）函數的`this`綁定規律

a.?普通函數

在嚴格模式('use strict')下，this為undefined。
在非嚴格模式下，this指向全局對象（瀏覽器window）。

function show() {console.log(this);
}
show(); // 在非嚴格模式：window；嚴格模式下：undefined

b.?箭頭函數

沒有自己的this，繼承自定義聲明時所在的作用域。

const obj = {value: 42,getValue: function() {const arrowFunc = () => this.value;return arrowFunc();}
};
console.log(obj.getValue()); // 42

c.?更復雜的綁定規則

使用call、apply、bind可以強制指定this。

const obj = {name: 'Bob'};
function showName() {console.log(this.name);
}
showName.call(obj); // 'Bob'

（5）函數的返回值

默認返回undefined。
使用return語句返回值。
函數可以返回任何類型的數據。

注意：

一旦遇到return，函數立即結束。
可以返回對象、數組、函數等。

（6）生成器函數（Generator Functions）

使用function*定義。
產生可迭代的值。

function* gen() {yield 1;yield 2;yield 3;
}
const iterator = gen();
console.log(iterator.next()); // { value: 1, done: false }

?8.對象

（1）常用對象

?（2）自定義對象

在JavaScript中，對象是鍵值對的無序集合。鍵（key）是字符串（或Symbol），值（value）可以是任何數據類型（包括原始類型、其他對象、函數等）。

a. 對象的創建方式

?對象字面量（Object Literal）- 最常用

這是創建對象最簡單、最常用的方式。

// 語法：
let objectName = {key1: value1,key2: value2,// ...
};// 示例：
let person = {name: "Alice",        // 屬性（property）age: 30,              // 屬性isStudent: false,     // 屬性greet: function() {   // 方法（method）console.log("Hello, my name is " + this.name);}
};

細節：

屬性名可以是標識符（不帶引號，如name），也可以是字符串（帶引號，如"user-id"）。如果屬性名是無效的標識符（如包含連字符、空格或數字開頭），則必須用引號。
屬性值可以是任何數據類型。
方法是值為函數的屬性。
this關鍵字在對象方法中指向當前對象本身。

`new Object()`?構造函數

不常用，但也是一種創建方式。

let person = new Object();
person.name = "Bob";
person.age = 25;
person.greet = function() {console.log("Hi, I'm " + this.name);
};

構造函數（Constructor Function）- 創造類實例的“模板”

用于創建具有相同屬性和方法的多個對象。

// 語法：
function ConstructorName(param1, param2) {this.property1 = param1;this.property2 = param2;this.method = function() {// ...};
}// 示例：
function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");};
}// 使用 new 關鍵字創建實例
let person1 = new Person("Charlie", 40);
let person2 = new Person("Diana", 28);person1.greet(); // Hello, my name is Charlie and I am 40 years old.
person2.greet(); // Hello, my name is Diana and I am 28 years old.

細節：

函數名通常首字母大寫（約定）。
this關鍵字在構造函數中指代新創建的實例。
必須使用new關鍵字來調用構造函數，否則this會指向全局對象（非嚴格模式下）。
每個實例都會有自己的greet方法，這可能會造成內存浪費（因為方法相同）。

使用原型（Prototype）優化構造函數 - 共享方法

為了避免每個實例都擁有獨立的方法副本，可以將方法定義在構造函數的原型上。

function Person(name, age) {this.name = name;this.age = age;
}// 將方法添加到 Person.prototype
Person.prototype.greet = function() {console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};let person3 = new Person("Eve", 35);
person3.greet(); // Hello, my name is Eve and I am 35 years old.

細節：

Person.prototype是一個對象，所有由Person構造函數創建的實例都會通過原型鏈繼承Person.prototype上的屬性和方法。
greet方法現在只存在一份，被所有Person實例共享，節約內存。

ES6?`class`?語法 - 現代JS推薦的面向對象方式

class是JavaScript中用來創建對象的語法糖，底層依然是原型和構造函數。

class Person {constructor(name, age) {this.name = name;this.age = age;}greet() { // 方法直接定義在類內部，會被添加到原型上console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}// 靜態方法（屬于類本身，不屬于實例）static sayHello() {console.log("Hello from the Person class!");}
}let person4 = new Person("Frank", 50);
person4.greet(); // Hello, my name is Frank and I am 50 years old.
Person.sayHello(); // Hello from the Person class!

細節：

constructor方法是類默認的構造函數，當使用new關鍵字創建實例時，會自動調用它。
在constructor之外定義的方法會自動添加到原型上。
static關鍵字用于定義靜態方法，只能通過類本身調用，不能通過實例調用。

b. 訪問和修改對象屬性/方法

點表示法（Dot Notation）

console.log(person.name); // Alice
person.age = 31;
person.greet();

方括號表示法（Bracket Notation）

當屬性名包含特殊字符、空格、或是一個變量時，必須使用方括號表示法。

console.log(person["name"]); // Alicelet propName = "age";
console.log(person[propName]); // 31person["favorite-color"] = "blue"; // 可以添加帶連字符的屬性
console.log(person["favorite-color"]);

c. 刪除對象屬性

使用delete運算符。

delete person.isStudent;
console.log(person.isStudent); // undefined

d. 檢查屬性是否存在

`in`?運算符

檢查屬性是否在對象或其原型鏈上。

console.log("name" in person);        // true
console.log("toString" in person);    // true (繼承自Object.prototype)
console.log("job" in person);         // false

`hasOwnProperty()`?方法

檢查屬性是否是對象自身的屬性（非繼承）。

console.log(person.hasOwnProperty("name"));       // true
console.log(person.hasOwnProperty("toString"));   // false

e. 遍歷對象屬性

`for...in`?循環

遍歷對象可枚舉的屬性（包括原型鏈上的）。

for (let key in person) {console.log(`${key}: ${person[key]}`);
}
// 注意：for...in 會遍歷原型鏈上的可枚舉屬性，需要結合 hasOwnProperty() 篩選
for (let key in person) {if (person.hasOwnProperty(key)) {console.log(`Own property - ${key}: ${person[key]}`);}
}

`Object.keys()`

返回一個包含對象自身所有可枚舉屬性名的數組。

let keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'greet', 'favorite-color']keys.forEach(key => {console.log(`${key}: ${person[key]}`);
});

`Object.values()`

返回一個包含對象自身所有可枚舉屬性值的數組。

let values = Object.values(person);
console.log(values); // ['Alice', 31, Function, 'blue']

`Object.entries()`

返回一個包含對象自身所有可枚舉屬性的[key, value]對數組。

let entries = Object.entries(person);
console.log(entries); // [['name', 'Alice'], ['age', 31], ['greet', Function], ['favorite-color', 'blue']]for (let [key, value] of entries) {console.log(`${key}: ${value}`);
}

f. 短屬性名和短方法名（ES6）

當變量名和屬性名相同時，可以簡寫。

let myName = "Grace";
let myAge = 22;let user = {myName,    // 等同于 myName: myNamemyAge,     // 等同于 myAge: myAgewalk() {   // 等同于 walk: function() { ... }console.log("Walking...");}
};
console.log(user.myName); // Grace
user.walk(); // Walking...

g. 計算屬性名（Computed Property Names）（ES6）

屬性名可以是一個表達式的結果。

let prop = "dynamicKey";
let obj = {[prop + "1"]: "value1",['another' + 'Key']: "value2"
};
console.log(obj.dynamicKey1);  // value1
console.log(obj.anotherKey);   // value2

9.JSON

（1）什么是JSON

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易于讀寫和解析。
它是基于JavaScript對象字面量語法的文本格式，但不僅限于JavaScript，可以在多種編程語言中使用。

（2）JSON的語法規則

a.基本結構

數據是鍵值對的集合
可以是對象（用{}包圍）或數組（用[]包圍）

b.JSON對象（Object）

{"key1": value1,"key2": value2,...
}

c. JSON數組（Array）

[value1,value2,...
]

d. 數值（Number）

支持整數和浮點數

e. 字符串（String）

必須用雙引號（"）包圍
支持轉義字符（如\n、\t、\"、\\）

f. 布爾值（Boolean）

g. null值?

h. 不能出現

單引號（字符串必須雙引號）
函數、日期對象、undefined（這些在JSON中不被支持）
不能有函數作為值

{"name": "John","age": 25,"isStudent": false,"scores": [95, 82, 88],"address": {"city": "New York","zip": "10001"},"skills": null
}

（3）在JavaScript中操作JSON

a.轉換為JSON字符串：`JSON.stringify`

將JavaScript對象轉成JSON字符串（常用于數據傳輸或存儲）

const obj = { name: "Alice", age: 30 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // '{"name":"Alice","age":30}'

b. 解析JSON字符串：`JSON.parse`

將JSON字符串轉成JavaScript對象（常用于接收數據）

const jsonStr = '{"name":"Bob","age":25}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // "Bob"

（4）擴展：自定義對象轉JSON的細節

當調用JSON.stringify()時，可以傳入replacer參數，用于控制序列化過程。

const obj = {name: "Tom",age: 28,greet() { return "Hi"; }
};
console.log(JSON.stringify(obj)); // 無`greet`方法，輸出：{"name":"Tom","age":28}// 只序列化特定字段
JSON.stringify(obj, ['name', 'age']);// 美化輸出，添加空格縮進
JSON.stringify(obj, null, 2);

注意：除數據外，函數和符號會被忽略。

?10.BOM

（1）什么是BOM？

BOM（Browser Object Model）是JavaScript在瀏覽器環境中提供的一組API，用于訪問和操作瀏覽器窗口和與瀏覽器相關的對象。它提供了除DOM以外的各種工具，使得腳本可以控制瀏覽器窗口、導航、歷史記錄、屏幕信息等。

注意：BOM不是標準的一部分，它在不同瀏覽器中的實現和支持略有差異。

（2）BOM的核心對象和功能

對象	描述	常用方法或屬性
`window`	瀏覽器窗口的全局對象，所有BOM對象都通過`window`訪問	代理全局變量（如`alert`，`document`等）
`location`	當前窗口的URL信息與導航	`href`,?`reload()`,?`assign()`,?`replace()`
`history`	訪問瀏覽器的歷史記錄	`back()`,?`forward()`,?`go()`
`navigator`	瀏覽器信息，比如瀏覽器類型、版本、操作系統	`userAgent`,?`platform`
`screen`	屏幕相關信息(如寬高、色深)	`width`,?`height`,?`colorDepth`
`alert()`、`confirm()`、`prompt()`	彈窗相關的函數，但這些是全局函數/方法，不是對象	彈窗 functions
`setTimeout()`?和?`setInterval()`	定時器函數，用于延時或定時操作	`clearTimeout()`,?`clearInterval()`

（3）BOM的常用對象及使用細節

a.?`window`對象

定義：整個瀏覽器窗口的代表，實際上是全局作用域的對象。
訪問方式：無需window.，直接使用（window是全局對象的引用）。

// 彈出提示框
alert("這是一個提醒");console.log(window.innerWidth); // 視口寬度
console.log(window.location.href); // 當前頁面URL

b.?`location`對象

作用：用于獲取或設置頁面的URL信息和進行導航。
常用屬性和方法：

屬性 / 方法	說明	示例
`href`	當前文檔的完整URL	`console.log(location.href);`
`protocol`	協議部分（`http:`、`https:`）	`location.protocol`
`host`	主機名和端口（如`localhost:8080`）	`location.host`
`pathname`	路徑部分	`location.pathname`
`search`	查詢字符串（URL中`?`后部分）	`location.search`
`hash`	URL中的錨點（`#`后）	`location.hash`
`reload()`	重新加載頁面	`location.reload();`
`assign(url)`	跳轉到指定URL	`location.assign('https://example.com');`
`replace(url)`	跳轉，但不會在歷史記錄中留下原頁面	`location.replace('https://example.com');`

// 導航到新頁面
location.href = 'https://www.google.com';// 重新加載頁面
location.reload();

c.?`history`對象

作用：操作瀏覽器的歷史記錄。
常用方法：

方法	作用	示例
`back()`	后退一頁	`history.back();`
`forward()`	前進一頁	`history.forward();`
`go(n)`	前進或后退n步（n可以為負）	`history.go(-2);`

// 后退一頁
history.back();// 前進兩頁
history.go(2);

d.?`navigator`對象

作用：提供有關用戶瀏覽器和設備的信息。
常用屬性：

屬性	描述	示例
`userAgent`	瀏覽器的用戶代理字符串	`console.log(navigator.userAgent);`
`platform`	操作系統平臺	`navigator.platform`
`appName`	瀏覽器應用名（少用，因兼容性差）	`navigator.appName`
`language`	當前用戶的語言偏好	`navigator.language`

e.?`screen`對象

作用：顯示屏相關信息。
常用屬性：

屬性	描述	示例
`width`	屏幕寬度（像素）	`screen.width`
`height`	屏幕高度（像素）	`screen.height`
`colorDepth`	色深（每個像素的色彩位數）	`screen.colorDepth`
`pixelDepth`	像素深度	`screen.pixelDepth`

f. 定時器函數

setTimeout()：延時執行
clearTimeout()：取消超時
setInterval()：周期執行
clearInterval()：取消周期

// 一次性延時
const timerId = setTimeout(() => {alert("一秒后彈出");
}, 1000);// 取消延時
clearTimeout(timerId);// 周期執行
const intervalId = setInterval(() => {console.log("每兩秒執行一次");
}, 2000);// 取消周期
clearInterval(intervalId);

（4）彈窗相關函數

alert(message)：顯示信息對話框
confirm(message)：顯示確認對話框，返回布爾值
prompt(message, default)：輸入框，返回用戶輸入（字符串），或null。

alert("這是一個提示");if (confirm("是否確定繼續？")) {console.log("用戶點擊確定");
} else {console.log("用戶點擊取消");
}const name = prompt("請輸入你的名字：", "張三");
console.log("用戶輸入的名字是：" + name);

（5）瀏覽器寬高與窗口操作

a.?`innerWidth`?和?`innerHeight`

視口（內容區）寬高
例：window.innerWidth

b.?`outerWidth`?和?`outerHeight`

包含邊框、滾動條等內容的全窗口尺寸

c.?`resize`事件

監聽窗口變化，動態調整布局。

window.addEventListener('resize', () => {console.log(`窗口寬度：${window.innerWidth}`);
});

d. 彈出新窗口（或標簽頁）

// 打開新窗口
const newWin = window.open("https://example.com", "_blank");// 關閉窗口
newWin.close();

e. 控制窗口大小與位置

resizeTo(width, height)：調整當前窗口大小
moveTo(x, y)：移動窗口（注意大部分瀏覽器限制）

window.resizeTo(800, 600);
window.moveTo(100, 100);

?11.DOM

（1）什么是DOM

DOM（Document Object Model，文檔對象模型）是HTML和XML文檔的編程接口。
它以樹狀結構（節點樹）表示頁面的所有內容，每個元素、屬性、文本都是節點。
JavaScript可以通過DOM操作網頁，實現動態內容更新和交互。

（2）DOM的基本結構

樹狀結構：
- Document：整個文檔的入口對象。
- 元素節點（Element）：網頁的標簽（<div>，<p>，<a>?等）。
- 文本節點（Text）：元素內部的文本內容。
- 屬性節點（Attr）：標簽的屬性。
- 注釋節點（Comment）：HTML中的注釋。

Document├── html├── head└── body├── div│     └── text└── p└── text

（3）常用的DOM操作語法和細節

a. 訪問元素

方法	作用	例子
`getElementById(id)`	按ID獲取元素	`const div = document.getElementById('myDiv');`
`getElementsByTagName(tagName)`	按標簽名獲取元素（HTMLCollection，類數組）	`document.getElementsByTagName('p');`
`getElementsByClassName(className)`	按類名獲取元素（HTMLCollection）	`document.getElementsByClassName('myClass');`
`querySelector(selector)`	選擇第一個符合條件的元素（CSS選擇器）	`document.querySelector('.myClass');`
`querySelectorAll(selector)`	選擇所有符合條件的元素，返回NodeList	`document.querySelectorAll('div > p');`

b. 修改元素

修改內容：

element.innerHTML = '新的HTML內容'; // 更改元素內部HTML
element.textContent = '純文本內容'; // 僅文本內容

修改樣式：

element.style.color = 'red'; 
element.style.backgroundColor = 'blue';

修改屬性：

element.setAttribute('title', '提示信息'); // 添加或修改屬性
const title = element.getAttribute('title'); // 獲取屬性
// 也可以直接用屬性訪問
element.id = 'newId'; // 直接通過屬性

c. 創建新元素?

const newDiv = document.createElement('div');     // 創建一個div元素
newDiv.innerHTML = '我是新添加的元素';           // 賦內容
document.body.appendChild(newDiv);               // 添加到body尾部

d. 刪除元素

const parent = document.getElementById('parentId');
const child = document.getElementById('childId');
parent.removeChild(child); // 從父元素中刪除子元素
// 也可以直接使用
child.remove(); // 現代瀏覽器支持

e. 事件綁定

添加事件監聽器：

element.addEventListener('click', function(event) {alert('元素被點擊了！');
});

移除事件監聽器（需要用到引用函數）：

function handleClick() {alert('點擊事件');
}
element.addEventListener('click', handleClick);
// 移除
element.removeEventListener('click', handleClick);

f. 其他常用操作

獲取子元素：

element.children; // 元素的子元素（HTMLCollection）
element.childNodes; // 所有子節點（包括文本、注釋）

兄弟元素：

element.nextElementSibling; // 下一個兄弟元素
element.previousElementSibling; // 上一個兄弟元素

父元素：

element.parentNode; // 或 parentElement

（4）DOM操作的細節注意點

性能：
- 多次操作DOM可能影響性能，建議批量操作或使用文檔片段（DocumentFragment）
兼容性：
- getElementsByClassName和querySelector在現代瀏覽器都支持
動態更新UI：
- 修改innerHTML和textContent會影響子元素，要小心使用
事件代理：
- 給父元素綁定事件，利用冒泡機制管理子元素事件，提高效率
classList?API：

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');
element.classList.contains('active');

（5）示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作示例</title>
</head>
<body><div id="container"><p class="text">這是一個段落</p><button id="btn">點擊我</button></div><script>const btn = document.getElementById('btn');btn.addEventListener('click', () => {// 創建新元素const newParagraph = document.createElement('p');newParagraph.textContent = '新添加的段落';// 添加樣式newParagraph.style.color = 'blue';// 添加到容器中document.getElementById('container').appendChild(newParagraph);// 修改已有元素const existingPara = document.querySelector('.text');existingPara.textContent = '內容被修改了';// 移除按鈕（示例）btn.remove();});</script>
</body>
</html>