個人博客：haichenyi.com。感謝關(guān)注

1. 目錄

• 1–目錄
• 2–組成
• 3–內(nèi)置對象

2. 組成

??一直都在說JS，JS，到底啥是JS有了解過嗎？JS由哪幾部分組成的呢？
定義： JavaScript是一種輕量級、解釋型或即時編譯型的編程語言，廣泛用于Web開發(fā)
3部分組成： ECMAScript，DOM，BOM

ECMAScript：

ECMAScript（簡稱ES）是由ECMA國際標準化組織制定的一個腳本語言標準，它是JavaScript的核心。它定義了JavaScript語言的基本語法、數(shù)據(jù)類型、操作符、控制語句、函數(shù)、對象等核心概念，以及模塊系統(tǒng)、異步編程、異常處理等高級特性。舉幾個簡單的例子

//1.變量聲明與賦值
// 使用var聲明變量
var name = "John";
console.log(name); // 輸出: John
// 使用let聲明變量
let age = 30;
console.log(age); // 輸出: 30
// 使用const聲明常量
const pi = 3.14;
console.log(pi); // 輸出: 3.14//2.函數(shù)定義與調(diào)用
// 使用function關(guān)鍵字定義函數(shù)
function add(a, b) {return a + b;
}
console.log(add(2, 3)); // 輸出: 5
// 使用函數(shù)表達式定義函數(shù)
const subtract = function(a, b) {return a - b;
};
console.log(subtract(5, 3)); // 輸出: 2
// 使用箭頭函數(shù)定義函數(shù)
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 輸出: 20//3.模板字符串
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 輸出: Hello, Alice!//4.類與對象
class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}`);}
}
let person1 = new Person("Bob", 25);
person1.greet(); // 輸出: Hello, my name is Bob//5.模塊
// module.js
export const name = "John";
export function greet() {console.log("Hello, " + name);
}
// main.js
import { name, greet } from './module.js';
console.log(name); // 輸出: John
greet(); // 輸出: Hello, John//6.解構(gòu)賦值
// 數(shù)組解構(gòu)
let [a, b] = [1, 2];
console.log(a); // 輸出: 1
console.log(b); // 輸出: 2
// 對象解構(gòu)
let { name, age } = { name: "Alice", age: 30 };
console.log(name); // 輸出: Alice
console.log(age); // 輸出: 30/7./數(shù)組操作
// 創(chuàng)建數(shù)組
let arr = [1, 2, 3, 4, 5];
// 訪問數(shù)組元素
console.log(arr[0]); // 輸出: 1

DOM（Document Object Model，文檔對象模型）

允許腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。以下是一些DOM操作的例子：

//1.選擇元素：
var element = document.getElementById('myElement'); // 根據(jù)ID選擇元素
var elements = document.getElementsByClassName('myClass'); // 根據(jù)類名選擇元素集合
var paragraphs = document.getElementsByTagName('p'); // 根據(jù)標簽名選擇元素集合//2.訪問和修改元素內(nèi)容：
var divContent = document.getElementById('myDiv').innerHTML; // 獲取元素的HTML內(nèi)容
document.getElementById('myDiv').innerHTML = '<p>New Content</p>'; // 設(shè)置元素的HTML內(nèi)容
var text = document.getElementById('myParagraph').textContent; // 獲取元素的文本內(nèi)容
document.getElementById('myParagraph').textContent = 'New Text'; // 設(shè)置元素的文本內(nèi)容//3.修改元素樣式：
var element = document.getElementById('myDiv');
element.style.color = 'red'; // 修改文本顏色
element.style.backgroundColor = 'yellow'; // 修改背景顏色
element.style.fontSize = '20px'; // 修改字體大小//4.創(chuàng)建和插入元素：
var newDiv = document.createElement('div'); // 創(chuàng)建新的元素節(jié)點
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv); // 將新元素添加到頁面的末尾
var newText = document.createTextNode('Hello, this is a text node'); // 創(chuàng)建新的文本節(jié)點
document.body.appendChild(newText); // 將文本節(jié)點添加到頁面//5.刪除元素：
var parentElement = document.getElementById('parentDiv');
var childElement = document.getElementById('childDiv');
parentElement.removeChild(childElement); // 刪除指定的子元素
var element = document.getElementById('myDiv');
element.remove(); // 直接刪除元素本身//6.事件處理：
var button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
}); // 為元素添加事件監(jiān)聽器
button.removeEventListener('click', handleClick); // 為元素移除事件監(jiān)聽器（假設(shè)handleClick是之前添加的事件處理函數(shù)）

BOM（Browser Object Model，瀏覽器對象模型）

??提供了與瀏覽器窗口進行交互的方法和屬性。只要是跟窗口相關(guān)的操作，都屬于BOM操作。比方說window調(diào)用的一些方法，窗口的全屏與非全屏等等。以下是一些BOM操作的例子：

//1.打開新窗口：
window.open('https://www.example.com');//2.關(guān)閉當前窗口：
window.close();//3.設(shè)置當前窗口大小：
window.resizeTo(800, 600);//4.設(shè)置當前窗口大小：
var currentUrl = window.location.href; // 獲取當前URL
window.location.href = 'https://www.example.com'; // 設(shè)置新的URL//5.獲取和設(shè)置當前URL：
var currentUrl = window.location.href; // 獲取當前URL
window.location.href = 'https://www.example.com'; // 設(shè)置新的URL//6.前進和后退瀏覽器歷史記錄：
history.forward(); // 前進到下一個歷史記錄
history.back(); // 后退到上一個歷史記錄//7.全屏API：
document.documentElement.requestFullscreen(); // 進入全屏狀態(tài)
document.exitFullscreen(); // 退出全屏狀態(tài)

PS:整篇文章，精煉一下，如下
JS是一種輕量級、解釋型或即時編譯型的編程語言，廣泛用于Web開發(fā)。
由三部分組成：ECMAScript，DOM，BOM
ECMAScript：js的核心，變量的定義，方法的調(diào)用等等。
DOM操作：跟element相關(guān)的一些方法。如獲取元素，修改元素樣式，修改元素內(nèi)容，刪減元素之類的。
BOM操作：跟窗口相關(guān)的，如window的一些方法open之類的