@
目录JavaScript
JavaScript BOM对象
BOM(Browser Object Model)对象是指浏览器对象模型,它提供了与浏览器窗口进行交互的对象和方法。例如,window 对象就是 BOM 的一部分,它代表了浏览器窗口。
我们可以使用 window 对象来执行诸如打开新窗口、关闭当前窗口、调整窗口大小等简单操作。
// 打开一个新窗口
window.open('https://www.example.com');
// 关闭当前窗口
window.close();
// 调整窗口大小
window.resizeTo(800, 600);
复杂一点的如 onl oad ,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 还是非常值得我们学习的。
标签:总结,TypeScript,console,函数,JavaScript,let,变量,log From: https://www.cnblogs.com/idk-lhf28/p/17486647.html