@

JavaScript

JavaScript BOM对象

BOM（Browser Object Model）对象是指浏览器对象模型，它提供了与浏览器窗口进行交互的对象和方法。例如，window 对象就是 BOM 的一部分，它代表了浏览器窗口。

我们可以使用 window 对象来执行诸如打开新窗口、关闭当前窗口、调整窗口大小等简单操作。

// 打开一个新窗口
window.open('https://www.example.com');

// 关闭当前窗口
window.close();

// 调整窗口大小
window.resizeTo(800, 600);

复杂一点的如 onload ，window.onload 是一个事件处理程序属性，它用于指定当页面加载完成后要执行的函数。当浏览器加载完页面中的所有资源（包括图片、脚本文件和样式表等）后，就会触发 load 事件，此时 window.onload 指定的函数会被调用。

window.onload = function() {
    console.log('俺已加载成功！开始今天的js学习吧');
}

在上面的示例中，我们将一个匿名函数（下文会讲到匿名函数）赋值给 window.onload 属性。当页面加载完成后，该匿名函数会被调用。

• 需要注意的是，由于 window.onload 只能指定一个函数，所以如果多次赋值，后面的赋值会覆盖前面的赋值。如果需要为 load 事件添加多个处理程序，可以使用 addEventListener() 方法。

除了window对象，BOM还包括其他一些对象，如screen、location、history和navigator等。这些对象提供了更多与浏览器窗口进行交互的方法。

JavaScript Document对象

Document 对象是指文档对象模型（DOM）中的一个对象，它代表了整个 HTML 文档。我们可以使用Document 对象来获取和操作页面中的元素。

例如，我们可以使用 getElementById 方法来获取页面中具有特定ID的元素。然后，我们可以使用该元素的属性和方法来改变它的内容、样式或行为。

// 获取页面中的元素
let element = document.getElementById('myElement');

// 改变元素的内容
element.innerHTML = 'New content';

// 改变元素的样式
element.style.color = 'red';

// 为元素添加事件监听器
element.addEventListener('click', function() {
    // 在这里添加点击元素时要执行的代码
});

除了 getElementById 方法，Document 对象还提供了其他一些方法，用于获取页面中的元素。例如，我们可以使用 getElementsByTagName 方法来获取页面中所有具有特定标签名的元素。

// 获取页面中所有的 select 元素
let selects = document.getElementsByTagName('select');

// 遍历所有的 select 元素
for (let i = 0; i < selects.length; i++) {
    let select = selects[i];
}

JavaScript 事件处理

JavaScript允许我们在页面中添加事件监听器，以便在特定事件发生时执行特定的代码。例如，我们可以在按钮上添加一个点击事件监听器，当用户点击按钮时执行某些操作。

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    // 在这里添加点击按钮时要执行的代码
});

除了点击事件之外，JavaScript还支持许多其他类型的事件，如鼠标移动、键盘按键、表单提交等。我们可以根据需要为页面中的元素添加不同类型的事件监听器。

JavaScript变量

在JavaScript中，我们使用变量来存储数据。变量可以存储不同类型的数据，如字符串、数字、布尔值等。

let myString = 'Hello, World!';
let myNumber = 3.14;
let myBoolean = true;

var String = 'Hello, World!';
var Number = 3.14;
var Boolean = true;

在定义变量时，我们需要使用关键字（如let或var）来声明变量，并为其分配一个初始值。此后，我们可以在代码中使用该变量，并根据需要更改其值。

• 对于JavaScript，有且仅有两个关键字（let和var）来声明变量，下面介绍一下二者的区别。
  其实最主要的区别在于它们的作用域。var 声明的变量具有函数作用域，这意味着它们在整个函数内都是可见的，甚至在声明之前就可以访问它们。而 let 声明的变量具有块作用域，这意味着它们只在最近的一对花括号（即代码块）内可见。
• 简单示例演示 let 和 var 的区别：

function example() {
    var x = 1;
    let y = 2;

    if (true) {
        var x = 3;
        let y = 4;

        console.log(x); // 输出3
        console.log(y); // 输出4
    }

    console.log(x); // 输出3
    console.log(y); // 输出2
}

example();

在上面的示例中，我们在函数内部使用 var 声明了一个名为 x 的变量，并使用 let 声明了一个名为 y 的变量。然后，在 if 语句的代码块内，我们再次声明了这两个变量。

由于 var 声明的变量具有函数作用域，所以在代码块内部声明的 x 变量会覆盖函数内部声明的 x 变量。而由于 let 声明的变量具有块作用域，所以在代码块内部声明的 y 变量不会影响函数内部声明的 y 变量。

因此，在代码块内部，x 的值为 3，而 y 的值为 4。而在代码块外部，x 的值仍然为 3（因为它被覆盖了），而 y 的值仍然为 2。

除了作用域之外，let 和 var 还有一些其他区别。例如，使用 let 声明的变量不能在声明之前访问（会抛出错误），而使用 var 声明的变量则可以（但值为 undefined）。此外，在同一作用域内，不能多次使用 let 声明同一个变量，而使用 var 则可以。

总之，由于 let 提供了更好的作用域控制和更严格的语法限制，所以建议尽可能使用 let 来声明变量。

JavaScript函数基础

函数是一段可以被重复调用的代码块。我们可以定义一个函数，并在需要时调用它。

function hello(name) {
    console.log('Hello, ' + name + '!');
}

sayHello('Alice');
sayHello('Bob');

在定义函数时，我们需要指定函数名称和参数列表。然后，在函数体内编写要执行的代码。当调用函数时，我们需要传递适当数量和类型的参数。

除了普通函数之外，JavaScript还支持匿名函数和箭头函数等其他类型的函数。

• 匿名函数

匿名函数是一种没有名称的函数。它通常用作回调函数或立即执行函数。

下面是一个简单的匿名函数示例，演示如何使用匿名函数作为回调函数：

functionTest(function() {
    console.log('Hello, World!');
}, 1000);

在上面的示例中，我们将一个匿名函数作为第一个参数传递给 functionTest函数。该匿名函数在 1000 毫秒后被调用，并在控制台输出 Hello, World!。

同样，匿名函数还可以用作立即执行函数。下面是一个简单的立即执行函数示例：

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

在上面的示例中，我们定义了一个匿名函数，并立即调用它。该匿名函数被调用后，会立即输出 Hello, World!。

• 箭头函数

let btn = document.getElementById('myBtn');
    btn.addEventListener('click', () => {
        alert('连接成功！');
    })

在上面的示例中，我们演示了如何使用箭头函数来定义事件处理程序。首先，为 myBtn 按钮添加了一个点击事件，然后使用箭头函数语法为该事件定义了一个回调函数。当用户点击按钮时，该回调函数会被调用。

同时，箭头函数有几个特点，如：

• 它不能绑定自己的 this 值，而是继承外部作用域的 this 值。
• 它不能用作构造函数，也就是说不能使用 new 关键字来调用它。
• 它没有自己的 arguments 对象，而是访问外部作用域的 arguments 对象。

JavaScript流程控制

流程控制语句允许我们根据特定条件执行特定的代码块。例如，我们可以使用if...else语句来根据条件执行不同的代码。

let number = 3;

if (number > 0) {
    console.log('正数');
} else {
    console.log('非正数');
}

除了if...else语句之外，JavaScript还提供了其他一些流程控制语句，如switch、for和while等。这些语句允许我们更灵活地控制代码的执行流程。

JavaScript数据类型

JavaScript有几种基本数据类型，包括字符串、数字、布尔值、null和undefined。此外，还有一些复合（引用）数据类型，如数组和对象。

let myString = 'Hello, World!';
let myNumber = 3.14;
let myBoolean = true;
let myNull = null;
let myUndefined = undefined;

let myArray = [1, 2, 3];
let myObject = {name: 'GG Bond', age: 19};

不同数据类型具有不同的特征和用途。例如，字符串用于存储文本数据，数字用于存储数值数据，布尔值用于存储真/假值等。

JavaScript数组

数组是一种用于存储多个值的数据结构。我们可以使用数组来存储一组相关的数据，并使用索引来访问其中的每个元素。

let myArray = [1, 2, 3];

console.log(myArray[0]); // 输出1
console.log(myArray[1]); // 输出2
console.log(myArray[2]); // 输出3

除了使用索引来访问数组元素之外，我们还可以使用数组的方法来操作数组。例如，我们可以使用push方法向数组末尾添加新元素，或使用splice方法从数组中删除元素等。

JavaScript运算符

JavaScript提供了许多运算符，用于执行各种计算。例如，我们可以使用算术运算符来执行基本的数学运算。

let x = 3;
let y = 4;

console.log(x + y); // 输出7
console.log(x - y); // 输出-1
console.log(x * y); // 输出12
console.log(x / y); // 输出0.75

当然，JavaScript还提供了其他一些运算符，如比较运算符、逻辑运算符和赋值运算符等。这些运算符允许我们执行更复杂的计算。

JavaScript正则表达式

正则表达式是一种用于匹配字符串模式的工具。我们可以使用正则表达式来验证输入、搜索和替换文本等。

let pattern = /hello/;
let text = 'Hello, World!';

console.log(pattern.test(text)); // 输出true

在定义正则表达式时，我们需要使用特殊的语法来描述要匹配的模式。然后，我们可以使用正则表达式对象的方法（如test和exec）来执行匹配操作。

let pattern = /hello/;
let text = 'Hello, World!';

// 使用 test 方法检查文本是否与模式匹配
let result = pattern.test(text);
console.log(result); // 输出 true

// 使用 exec 方法在文本中搜索模式
result = pattern.exec(text);
console.log(result); // 输出 ["hello", index: 0, input: "Hello, World!", groups: undefined]

JavaScript字符串函数

JavaScript提供了许多字符串函数，用于处理字符串。例如，我们可以使用 toUpperCase 函数将字符串转换为大写。

let text = 'Hello, World!';

console.log(text.toUpperCase()); // 输出HELLO, WORLD!

除此之外，JavaScript 还提供了其他一些字符串函数，如 toLowerCase 、charAt 和 substring 等。这些函数允许我们更灵活地处理字符串数据。

TypeScript简单示例

TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的超集。TypeScript 添加了类型系统和其他功能，使我们能够更好地组织和维护大型代码库。

与 JavaScript 类似，TypeScript 也包括变量、函数、流程控制、数据类型、数组、运算符、正则表达式和字符串函数等概念。此外，TypeScript 还提供了一些额外的功能，如接口、类和模块等。

下面是一个简单的 TypeScript 示例，演示了如何使用接口来定义类型：

interface Person {
    name: string;
    age: number;
}

function hello(person: Person) {
    console.log('Hello, ' + person.name + '!');
}

let lhf: Person = {name: 'lhf', age: 19};

hello(lhf);

在上面的示例中，我们定义了一个 Person 接口，用于描述人的类型。然后，我们定义了一个 hello 函数，它接受一个 Person 类型的参数。最后，我们创建了一个 Person 类型的变量，并调用了 hello 函数。

同时 TypeScript 还支持类和模块等其他高级功能，这些功能使我们能够更好地组织和维护大型代码库。因此 TypeScript 还是非常值得我们学习的。

本栏目推荐文章
• NUS CS1101S：SICP JavaScript 描述：一、使用函数构建抽象
• NUS CS1101S：SICP JavaScript 描述：前言、序言和致谢
• NUS CS1101S：SICP JavaScript 描述：五、使用寄存器机进行计算
• NUS CS1101S：SICP JavaScript 描述：四、元语言抽象
• NUS CS1101S：SICP JavaScript 描述：三、模块化、对象和状态
• Flex&Bison
• Windows Server 2016 & 2019 工作站速配脚本
• 一些Mybatis的知识点&易错点总结
• Dynamics 365 Finance & Operations with Power Automate
• Cisco Secure Client 5.1.1.42 (macOS, Linux, Windows & iOS, Andrord) - 思科安全客户端下载

JavaScript TypeScript ampjavascript typescript amp typescript readonly例子amp typescript javascript方法 javascript方式 简介amp javascript typescript commonjs nodejs 数组javascript typescript项目 对象javascript amp windows javascript api amp bom typescript javascript vs typescript