📢CSDN博客主页：低山高梧桐-致力于做最优质的内容
📢如果涉及到版权问题，烦请联系作者删除！
📢如果文章有谬误，烦请您指出斧正，作者致力于做最好的博客。
📢整合：低山高梧桐 首发于CSDN 欢迎点赞👍收藏⭐留言打扰📝
更新日志
2023年7月22日 更换代码图片为代码段
文章目录
学习目标
旨在Javascript快速入门。
有编程基础的同学们可以直接从目录查看用法；
初学的同学们我会在接下来补充好快速入门的知识点
1 前期准备
1.1 需要了解的知识
1.1.1 Js简介
当谈到前端开发，JavaScript（简称JS）被广泛地应用于网页设计和交互开发中。
JavaScript是一门高级、解释型的编程语言，其主要用途是为网页增加交互性和动态功能。与HTML和CSS配合，它能够使网页不再仅仅是静态的文档，而是变得更加生动活泼。通过JavaScript，我们可以实现例如表单验证、动画效果、用户交互和数据处理等功能，让网页焕发出无限的可能性。
值得一提的是，JavaScript拥有强大的跨平台特性。由于它是在浏览器端执行的，几乎所有的现代浏览器都支持JavaScript。这意味着你可以使用JavaScript开发适用于各种设备和操作系统的应用程序和网站。无论是在桌面端、移动端还是其他设备上，都可以充分利用JavaScript的魅力。
此外，JavaScript具备丰富的生态系统和庞大的社区支持。它拥有大量的开源库和框架，如React、Vue.js、Angular等，为开发者提供了丰富的工具和资源。这些工具可以加速开发进程，提高代码质量，并且方便开发者与其他开发者进行合作。在这个充满创新和迅速发展的时代，JavaScript为开发者提供了一个广阔的舞台。
JavaScript不仅仅局限于浏览器端的开发。随着Node.js的兴起，JavaScript还可以用于服务器端开发。这一变革使得JavaScript成为了一门全栈式的编程语言，开发者可以使用同一种语言同时处理前后端逻辑，提高开发效率和代码复用性。
JavaScript还能够与其他技术紧密结合，创造出许多强大的应用。例如，通过JavaScript和HTML5的Canvas API，我们可以开发出各种令人惊艳的游戏和可视化效果。通过JavaScript和WebRTC技术，我们可以实现实时音视频通信。通过JavaScript和机器学习库，我们可以构建智能化的应用程序。JavaScript的灵活性和可扩展性为创新提供了巨大的空间。
1.2 常用开发环境
推荐Visual Studio Code来进行前端开发
1.3 初学者必看；有基础直接当文档查看用法即可
我们可以通过开发者工具的控制台来编写并运行js语句，以此检验学习成果和深入了解知识。
自已在编写时也可以尝试改变语句能改变的内容，这样学习起来非常深刻。
我们发车辣！！！
1.4 博客教程来源
大家也可以从这里面看视频，用该博客当做讲义。
如果需要pdf版本
if( 想要学一门新手艺 == true ){
把任何教程网页下载成md文档？转为pdf？一篇就够了_低山高梧桐的博客-CSDN博客
}else{
【免费】实例驱动的JavaScript教程，帮助你快速上手.pdf资源-CSDN文库
}
1.4.1 视频教程
JavaScript速成课【油管最火JS教程】_哔哩哔哩_bilibili：这个教程值得一提，在1:40:30之前都是js基础知识，后面就是和html+css的整合部分了。原作者是YouTube上的博主YouTube原视频链接，需要魔法，翻译是鱼C-小甲鱼。
1.4.2 在线教程
JavaScript 教程 | 菜鸟教程 (runoob.com)：很出名的菜鸟教程，亮点是有在线的编译器，可以写代码和运行，加深理解，嘎嘎好用。
JavaScript | MDN (mozilla.org)：一个翻译过来的前端学习网站。
2 基础知识
先行篇 Chrome 浏览器中执行 JavaScrip
本章节为大家介绍如何在 Chrome 浏览器上进行 JavaScript 代码的运行与调试。
Chrome 是由 Google 开发的免费网页浏览器，对于前端开发来说（尤其是调试代码）非常方便。
Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。
我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击页面，选择**“检查”**来开启开发者工具。
也可以在右上角菜单栏选择 “更多工具”=》“开发者工具” 来开启：
2. Console 窗口调试 JavaScript 代码
打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
上图中我们在 > 符号后输入我们要执行的代码 console.log(“runoob”)，按回车后执行。
我们也可以在其他地方复制一段代码过来执行，比如复制以下代码到 Console 窗口，按回车执行：
console.log("runoob-1")
console.log("runoob-2")
清空 Console 窗口到内容可以按以下按钮：
2、Chrome snippets 小脚本
我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。
点击 Create new snippet 后，会自动创建一个文件，你只需在右侧窗口输入以下代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。
console.log("runoob-1")
console.log("runoob-2")
保存后，右击文件名，选择 “Run” 执行代码：
2.1 两种引用方式
2.1.1 一种是在script标签里直接写js语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>低山的网页</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">段落一</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="此处是js函数";
}
</script>
</body>
</html>
值得一提的是script标签不仅能够放在body中还可以放在head中
2.1.2 一种是使用独立的js文件，然后在script标签中设置scr属性
我们需要先在script标签中使用scr属性来引入外部的JS文件，这个时候我们需要在同级文件夹里面建立一个外部的JS文件，比如示例中的myScript.js；
另外需要注意的是如果不在同级文件夹下可能需要设置路径。
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
2.2 变量声明和HelloWorld
2.2.1 绕不开的HelloWorld（输出方式）
JavaScript 可以通过不同的方式来输出数据：
-
使用 window.alert() 弹出警告框。
window.alert('HelloWorld'); //而在js中，window对象是全局对象，所以可以这样写： alert('HelloWorld'); -
使用 document.write() 方法将内容写到 HTML 文档中，这里先简单了解一下，我们主要放到后面说。
document.write(Date()); /* 使用 document.write() 可以向文档写入内容。 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 */ -
使用 innerHTML 写入到 HTML 元素，会显示到HTML网页上，这里先简单了解一下，我们主要放到后面说。
document.getElementById("demo").innerHTML = "HelloWorld。"; /* 1.getElementById()是通过id选择，"demo"指的是段落的id属性 */ -
使用 console.log() 写入到浏览器的控制台。
如果你手上的浏览器支持调试，你可以使用 console.log() 方法在浏览器中输出。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
接下来我们也常使用这种。
console.log('Hello World!');//正常的日志输出 //下面两种调试用，很少用到 console.error('Hello World!'); console.warn('Hello World!');
2.2.2 变量声明
变量声明
var y=5;//全局变量；易冲突
let x=5;
x=4;//可以重新赋值
const z=5;//不能当做变量赋值，需要初始化
尽量使用const，避免使用var。const > let > var
当声明变量时，我们可以使用const或let关键字。它们各自有不同的优势和适用场景。
对于const声明的变量，有以下优势：
- 提醒读代码的人该变量是不可修改的。
- 防止在修改代码的过程中无意中修改了该变量，从而减少错误的发生。
对于let声明的变量，有以下优势：
- 不存在预编译和变量提升的问题。
- 先声明再使用可以让代码更加规范。
let是块级作用域，不会影响全局变量的声明。
根据使用场景，一般建议：
let适用于基本数据类型的声明。const适用于引用数据类型，例如函数对象等的声明。
变量提升机制
我们在全局作用域中或局部作用域中，使用var关键字声明的变量，都会被提升到该作用域的最顶部，这就是我们常说的变量提升
2.3 数据类型
2.3.1 原始数据类型
const name = "John";
const age = 30;
const rating = 4.5;
const isCool = true;
const x = null;//Object类型
const y = undefined;
let z;
console.log(typeof age); // 检验变量的类型
| 数据类型 | 定义 | 主要区别 |
|---|---|---|
| String | 一串字符组成的文本 | 用于表示文本和字符串，可通过引号（单引号或双引号）定义 |
| Number | 数字值 | 用于表示数字，包括整数和浮点数，可以进行数学计算 |
| Boolean | 代表真或假的逻辑值 | 只有两个值：true（真）和false（假），用于条件判断 |
| null | 表示空值或无值 | 是一个特殊的关键字，表示变量没有值 |
| undefined | 未定义值 | 表示变量已声明但未赋值 |
| Symbol | 唯一且不可改变的数据类型 | 用于创建具有唯一性的标识符，防止命名冲突 |
2.3.2 String
字符串拼接
console.log('我是低山，我今年20了');
const name = "低山";
const age = 20;
console.log('我是' + name +'，我今年' + age '了');
//字符串模板
console.log(`我是${name}，我今年${age}了`);//这里是反引号，不是引号,该键在esc键下方
const hello = `我是${name}，我今年${age}了`;
console.log(hello);
字符串的常用方法
const s = 'Hello World!';
//下面是获取字符串的长度
console.log(s.length);//属性没有括号，方法才会有括号
//改变大小写对于中文无效
console.log(s.toUpperCase());//把字符串变为大写
console.log(s.toLowerCase());//把字符串变为小写
//下列是字符串的截取函数
console.log(s.substring(0,4));//按照长度截取字符串
console.log(s.substring(0,5).toUpperCase());//还可以在方法后调用其他方法，就像链子一样
console.log(s.split(''));//按照参数截取字符串
执行结果：
注释
单行注释和多行注释
//这是单行注释
/*这是多行注释
多行的啦
很多行的哟
中间随便加哟*/
/*
多行这样写更好看
*/
注释就是写点能让别人看懂的中文，不然写一堆屎山，自己都看不懂
2.3.3 数组
数组是 JavaScript 中一种用于存储和组织多个值的数据结构。下面对提供的代码进行总结和概括：
// 创建一个包含一组数字的数组
const number = new Array(1, 2, 3, 4, 5);
console.log(number);
// 创建一个包含不同类型的元素的数组
const fruits = ['apples', 'oranges', 'pears', 10, true];
console.log(fruits[1]); // 访问数组中的元素，数组索引从0开始
fruits[3] = 'grapes'; // 修改数组中的元素
console.log(fruits);
// 注意：使用 const 声明的数组变量无法重新赋值，但可以修改数组中的元素
fruits.push('mangos'); // 从数组末尾添加新的元素
fruits.unshift('bananas'); // 从数组开头添加新的元素
fruits.pop(); // 移除数组的最后一个元素
console.log(Array.isArray(fruits)); // 判断变量是否为数组类型
总结：
- 数组是一种可用于存储多个值的数据结构。
- 可以通过下标索引访问数组中的元素，索引从0开始。
- 数组的长度可以根据需要动态调整，可以通过修改数组元素来改变数组内容。
- 使用
push()方法可以在数组末尾添加新的元素。 - 使用
unshift()方法可以在数组开头添加新的元素。 - 使用
pop()方法可以移除数组的最后一个元素。 - 使用
Array.isArray()方法可以判断一个变量是否为数组类型。
2.3.4 对象
对象就是键值对
// 创建一个包含个人信息的对象
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
hobbies: ['music', 'movies', 'sports'],
address: {
street: '50 main st',
city: 'Boston',
state: 'MA'
}
};
console.log(person.firstName, person.lastName); // 访问对象中的属性
console.log(person.hobbies[1]); // 访问对象中的嵌套数组的元素
// 使用解构赋值从对象中获取属性值
const { firstName, lastName, address: { city } } = person;
console.log(city);
person.email = 'john@gmail.com'; // 向对象中添加新的属性
console.log(person);
执行结果：
总结：
- 对象是一种用于存储键值对的数据结构。
- 键值对由属性名和属性值组成，通过冒号进行关联。
- 属性值可以是任意类型的数据，包括字符串、数字、布尔值、数组、甚至是嵌套的对象。
- 可以使用点符号或方括号语法来访问对象的属性。
- 可以使用解构赋值从对象中提取属性值并赋给变量。
- 可以动态地向对象中添加新的属性。
接下来就不再每个都放入执行结果，大家主动执行效果会更好。
2.3.5 数组对象
// 创建一个包含多个任务的数组对象
const todos = [
{
id: 1,
text: 'Take out trash',
isCompleted: true
},
{
id: 2,
text: 'Meeting with boss',
isCompleted: true
},
{
id: 3,
text: 'Dentist appt',
isCompleted: false
}
];
console.log(todos); // 输出整个数组对象
console.log(todos[1].text); // 访问数组对象中的某个元素的属性
总结：
- 数组对象是一种特殊的数组，其中的每个元素是一个对象。
- 每个对象都可以有多个属性，每个属性由键值对（属性名和属性值）组成。
- 可以通过索引访问数组对象中的特定元素。
- 可以使用点符号或方括号语法来访问对象的属性。
- 可以根据需要在数组对象中存储不同类型的数据。
2.3.6 JSON
创建了一个包含多个任务的数组对象 todos。然后，使用 JSON.stringify() 方法将该数组对象转换为 JSON 字符串。
下面是代码的概括和输出结果：
todos = [
{
id: 1,
text: 'Take out trash',
isCompleted: true
},
{
id: 2,
text: 'Meeting with boss',
isCompleted: true
},
{
id: 3,
text: 'Dentist appt',
isCompleted: false
}
];
const todoJSON = JSON.stringify(todos);
console.log(todoJSON);
输出结果：
[
{"id":1,"text":"Take out trash","isCompleted":true},
{"id":2,"text":"Meeting with boss","isCompleted":true},
{"id":3,"text":"Dentist appt","isCompleted":false}
]
总结：
- JSON（JavaScript Object Notation）是一种常用的数据交换格式，以文本形式表示结构化的数据。
- 可以使用
JSON.stringify()方法将 JavaScript 对象或数组转换为 JSON 字符串。 - 在输出结果中，每个对象元素都被转换成了一个 JSON 对象，并且整个数组被包裹在方括号中。
2.4 语句结构
2.4.1 循环结构
for
for(let i = 0; i < 10; i++){
console.log(i);
}
for循环由三个部分组成：初始化部分、条件部分和增量部分。let i = 0是初始化部分，它声明并初始化了一个变量i，将其值设置为 0。i < 10是条件部分，它定义了循环执行的条件。只要条件为真（即i的值小于 10），循环就会继续执行。i++是增量部分，它递增变量i的值，使其每次循环后加 1。- 循环体是花括号
{}包裹的部分，在每次循环迭代时会执行其中的代码。 - 在循环体中，
console.log(i)打印当前循环迭代的数字i。
因此，这段代码会输出数字 0 到 9，每个数字占一行。
由此我们可以知道for循环的知识点
- 初始化部分用于初始化循环变量。
- 条件部分定义了确定循环继续执行的条件。
- 增量部分用于更新循环变量的值。
- 在每次循环迭代时，循环体中的代码会被执行。
- 执行完一次循环后，增量部分会递增循环变量的值，并再次进行条件判断。
while
let i = 0;
while (i < 10) {
console.log(`While Loop Number: ${i}`);
i++;
}
- 首先，我们在外部定义了一个变量
i并将其初始化为 0。 - 然后，
while关键字引导着一个循环结构，该循环会在指定条件为真时一直执行。 - 循环体内的代码块（
console.log('While Loop Number: ${i}')）会在每次循环时被执行，输出当前循环迭代的数字i。 - 循环体的最后一行
i++是对循环变量i进行递增操作，将其增加 1。 - 必须确保循环变量的值在适当的时候发生变化，否则循环可能无法终止或进入死循环。
- 在本示例中，通过逐渐增加
i的值，当i不再满足条件i < 10时，循环将终止。
请注意，原始代码中的模板字符串 ${i} 应该用反引号 ```而不是单引号 ' 来包围，以便在字符串中正确插入变量的值。
for循环遍历数组
//之前定义的数组
todos = [
{
id: 1,
text: 'Take out trash',
isCompleted: true
},
{
id: 2,
text: 'Meeting with boss',
isCompleted: true
},
{
id: 3,
text: 'Dentist appt',
isCompleted: false
}
];
// 使用 for 循环遍历数组并打印每个 todo 项的文本内容
for(let i = 0; i < todos.length; i++){
console.log(todos[i].text);
}
// 使用 for...of 循环遍历数组并打印整个 todos 数组
for(let todo of todos){
console.log(todos);
}
// 使用 forEach 方法遍历数组并打印每个 todo 项的文本内容
todos.forEach(function(todo){
console.log(todo.text);
});
// 使用 map 方法创建一个新数组 todoText，其中包含 todos 数组中每个 todo 项的文本内容
const todoText = todos.map(function(todo){
return todo.text;
});
console.log(todoText);
// 使用 map 方法创建一个新数组 todoCompleted，其中包含 todos 数组中每个已完成的 todo 项的布尔值
const todoText = todos.map(function(todo){
return todo.isCompleted === true;
});
console.log(todoCompleted);
// 使用 map 方法创建一个新数组，包含已完成的任务的布尔值
const todoText = todos.map(function(todo){
return todo.isCompleted === true;
}).map(function(todo){
return todo.text; // 使用 map 方法创建一个新数组，提取已完成的任务的文本
})
console.log(todoCompleted);
=== 恒等于：除了比较值，还比较数据类型
2.4.2 条件结构
// 使用 if 语句进行条件判断
const x = 10;
if(x == 10){
console.log('x is 10'); // 如果 x 等于 10，则打印输出 'x is 10'
}
const x = 20;
if(x == 10){
console.log('x is 10'); // 如果 x 等于 10，则打印输出 'x is 10'
}else{
console.log('x is NOT 10'); // 否则打印输出 'x is NOT 10'
}
if(x == 10){
console.log('x is 10'); // 如果 x 等于 10，则打印输出 'x is 10'
}else if(x > 10){
console.log('x is greater than 10'); // 否则如果 x 大于 10，则打印输出 'x is greater than 10'
}
else{
console.log('x is NOT 10'); // 否则打印输出 'x is NOT 10'
}
// 使用逻辑运算符进行条件判断
const x = 4;
const y = 10;
if(x > 5 || y > 10){
console.log('x is more than 5 or y is more than 10'); // 如果 x 大于 5 或者 y 大于 10，则打印输出 'x is more than 5 or y is more than 10'
}
const x = 4;
const y = 11;
if(x > 5 || y > 10){
console.log('x is more than 5 or y is more than 10'); // 如果 x 大于 5 或者 y 大于 10，则打印输出 'x is more than 5 or y is more than 10'
}
const x = 6;
const y = 11;
if(x > 5 && y > 10){
console.log('x is more than 5 or y is more than 10'); // 如果 x 大于 5 并且 y 大于 10，则打印输出 'x is more than 5 or y is more than 10'
}
// 使用 switch 语句进行条件判断
const x = 10;
const color = x > 10 ? 'red' : 'blue'; // 如果 x 大于 10，则 color 等于 'red'，否则等于 'blue'
switch(color){
case 'red':
console.log('color is red'); // 如果 color 等于 'red'，则打印输出 'color is red'
break;
case 'blue':
console.log('color is blue'); // 如果 color 等于 'blue'，则打印输出 'color is blue'
break;
default:
console.log('color is NOT red or blue'); // 否则打印输出 'color is NOT red or blue'
break;
}
条件结构语句的对比表格：
| 语法 | 描述 |
|---|---|
| if | 如果某个条件为真，则执行特定代码块 |
| if-else | 如果某个条件为真，则执行特定代码块；否则执行另一个代码块 |
| if-else if-else | 如果某个条件为真，则执行特定代码块；否则如果另一个条件为真，则执行相应代码块；否则执行最后一个代码块 |
| switch | 根据变量的不同值来执行不同的代码块 |
逻辑语句的常用知识点表格：
| 逻辑语句 | 描述 |
|---|---|
| && | 逻辑与运算符，如果两个条件都为真，则返回真 |
| || | 逻辑或运算符，如果其中一个条件为真，则返回真 |
| ! | 逻辑非运算符，用于对一个条件取反，如果条件为真，则返回假 |
| 三元条件运算符 | 用于将简单的 if-else 结构简化成一行表达式 |
使用逻辑符号连接条件比使用if嵌套更加干净和简洁
2.5 函数
// 这是一个函数定义，用于将两个数字相加并打印结果
function addNums(num1, num2){
console.log(num1 + num2);
}
addNums(); // 调用函数，不传递参数，num1 和 num2 的值为 undefined，在相加时转换成 NaN
// 这是一个带有默认参数的函数定义，若不传入参数，则默认为 1
function addNums(num1 = 1, num2 = 1){
return num1 + num2;
}
console.log(addNums(5,5)); // 调用函数，传入参数 5 和 5，返回 10
2.5.2 箭头函数
// 使用箭头函数定义一个函数，该函数将两个数字相加并返回结果
const addNums = (num1 = 1, num2 = 1) => {
return num1 + num2;
}
console.log(addNums(5, 5)); // 调用函数，传入参数 5 和 5，返回 10
// 使用箭头函数定义一个函数，该函数将两个数字相加并打印结果
const addNums = (num1 = 1, num2 = 1) => console.log(num1 + num2);
addNums(5, 5); // 调用函数，传入参数 5 和 5，打印结果 10
// 使用箭头函数定义一个函数，该函数将两个数字相加并返回结果，使用隐式返回
const addNums = (num1 = 1, num2 = 1) => num1 + num2;
console.log(addNums(5, 5)); // 调用函数，传入参数 5 和 5，返回 10
// 使用箭头函数定义一个函数，该函数将参数与数字 5 相加并返回结果
const addNums = num1 => num1 + 5;
console.log(addNums(5)); // 调用函数，传入参数 5，返回 10
// 使用箭头函数对数组 todos 中的每个元素执行打印操作
todos.forEach((todo) => console.log(todo));
2.6 面向对象编程
2.6.1 对象
// 使用构造函数创建对象
function Person(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
}
const person1 = new Person('John','Doe','4-3-1980');
console.log(person1); // 输出对象person1
//以上代码通过构造函数 `Person` 创建了一个对象 `person1`，对象具有 `firstName`、`lastName` 和 `dob` 三个属性。
// 创建多个对象
function Person(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = dob;
}
const person1 = new Person('John','Doe','4-3-1980');
const person2 = new Person('Mary','Smith','3-6-1970');
console.log(person2.firstName); // 输出person2的firstName属性
可以使用同一个构造函数创建多个对象，每个对象具有独立的属性和值。
// 使用Date类型属性
function Person(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob); // 使用Date类型存储生日
}
const person1 = new Person('John','Doe','4-3-1980');
const person2 = new Person('Mary','Smith','3-6-1970');
console.log(person2.dob); // 输出person2的生日
console.log(person2.dob.getFullYear()); // 输出person2的生日年份
在构造函数中使用 new Date() 创建一个 Date 对象，以存储日期类型的属性。
// 添加对象方法
function Person(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
this.getBirthYear = function(){
return this.dob.getFullYear(); // 返回生日的年份
}
this.getFullName = function(){
return `${this.firstName} ${this.lastName}`; // 返回全名
}
}
const person1 = new Person('John','Doe','4-3-1980');
const person2 = new Person('Mary','Smith','3-6-1970');
console.log(person1.getBirthYear()); // 调用对象方法获取person1的生日年份
console.log(person1.getFullName()); // 调用对象方法获取person1的全名
可以在构造函数中定义对象的方法，通过 this 关键字访问对象的属性和方法。
2.6.2 原型
// 使用原型定义对象方法
function Person(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
Person.prototype.getBirthYear = function(){
return this.dob.getFullYear();
}
Person.prototype.getFullName = function(){
return `${this.firstName} ${this.lastName}`;
}
const person1 = new Person('John','Doe','4-3-1980');
const person2 = new Person('Mary','Smith','3-6-1970');
console.log(person1); // 输出person1对象
console.log(person2.getFullName()); // 调用对象方法获取person2的全名
可以使用原型来定义对象的方法，这样所有通过构造函数创建的对象都可以共享原型上的方法。
// 使用class语法糖定义对象
class Person{
constructor(firstName, lastName, dob){
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
getBirthYear(){
return this.dob.getFullYear();
}
getFullName(){
return `${this.firstName} ${this.lastName}`;
}
}
通过使用 class 语法糖可以更简洁地定义对象和方法。
3 DOM
3.1 从dom选择元素
console.log(window); // 输出全局对象window
alert(1); // 弹出对话框显示数字1
3.1.1 单元素
console.log(document.getElementById('my-form')); // 根据id选择单个元素
const form = document.getElementById('my-form'); // 将选中的元素保存到变量中
console.log(form);
console.log(document.querySelector('.container')); // 使用CSS选择器选择单个元素
console.log(document.querySelector('h1')); // 选择第一个<h1>元素
可以使用 document.getElementById()、document.querySelector() 等方法选择单个元素。
3.1.2 多元素
console.log(document.querySelectorAll('.item')); // 使用CSS选择器选择多个元素
console.log(document.getElementsByClassName('item')); // 根据类名选择多个元素
console.log(document.getElementsByTagName('li')); // 根据标签名选择多个元素
可以使用 document.querySelectorAll()、document.getElementsByClassName() 和 document.getElementsByTagName() 方法选择多个元素。
3.2 操作dom元素
3.2.1 遍历dom元素
const items = document.querySelectorAll('.item'); // 获取所有class为item的元素
items.forEach((item) => console.log(item)); // 遍历并输出每个元素
可以使用 querySelectorAll() 获取多个元素，然后使用 forEach() 方法遍历并处理每个元素。
3.2.2 更改dom元素
const ul = document.querySelector('.item'); // 获取class为item的元素
ul.remove(); // 移除元素
可以使用 remove() 方法移除一个元素。
const ul = document.querySelector('.item'); // 获取class为item的元素
ul.firstElementChild.textContent = 'Hello'; // 修改第一个子元素的文本内容
可以使用 textContent 属性更改元素的文本内容。
ul.firstElementChild.textContent = 'Hello';
ul.children[1].innerText = 'Brad'; // 修改第二个子元素的文本内容
ul.lastElementChild.innerHTML = '<h1>Hello</h1>'; // 修改最后一个子元素的HTML内容
可以使用 innerText 或 innerHTML 属性修改子元素的文本或HTML内容。
const btn = document.querySelector('.btn'); // 获取class为btn的元素
btn.style.background = 'red'; // 修改按钮的背景颜色
可以使用 style 属性修改元素的样式。
const btn = document.querySelector('.btn'); // 获取class为btn的元素
btn.addEventListener('click', (e) => { // 添加点击事件监听器
console.log('click');
});
可以使用 addEventListener() 方法添加事件监听器，以对特定事件进行响应。
const btn = document.querySelector('.btn'); // 获取class为btn的元素
btn.addEventListener('click', (e) => { // 添加点击事件监听器
e.preventDefault(); // 阻止默认行为
console.log('click');
});
可以在事件处理函数中使用 preventDefault() 方法阻止元素的默认行为。
btn.addEventListener('click', (e) => { // 添加点击事件监听器
e.preventDefault(); // 阻止默认行为
console.log(e.target); // 输出实际触发事件的元素
});
可以使用 e.target 获取实际触发事件的元素。
const btn = document.querySelector('.btn'); // 获取class为btn的元素
btn.addEventListener('click', (e) => { // 添加点击事件监听器
e.preventDefault(); // 阻止默认行为
console.log(e.target.className); // 输出实际触发事件的元素的类名
});
可以使用 className 属性获取实际触发事件的元素的类名。
const btn = document.querySelector('.btn'); // 获取class为btn的元素
btn.addEventListener('click', (e) => { // 添加点击事件监听器
e.preventDefault(); // 阻止默认行为
document.querySelector('#my-form').style.background = '#ccc'; // 修改id为my-form的元素的背景颜色
});
可以在事件处理函数中修改元素的样式。
btn.addEventListener('click', (e) => { // 添加点击事件监听器
e.preventDefault(); // 阻止默认行为
document.querySelector('#my-form').style.background = '#ccc'; // 修改id为my-form的元素的背景颜色
document.querySelector('body').classList.add('bg-dark'); // 在body元素上添加类名bg-dark
});
通过添加类改变背景颜色
btn.addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('#my-form').style.background = '#ccc';
document.querySelector('body').classList.add('bg-dark');
});
以上代码是一个事件监听器，当按钮被点击时触发。在事件处理函数中，我们阻止了按钮的默认行为，并通过修改元素的样式来改变背景颜色。document.querySelector('#my-form').style.background 表示选择id为my-form的元素，并修改其背景颜色为 #ccc。document.querySelector('body').classList.add('bg-dark') 表示选择body元素，并添加类名bg-dark，从而改变整个页面的背景颜色。
随着点击改变背景颜色或者改变最后一个标签的内容
btn.addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('#my-form').style.background = '#ccc';
document.querySelector('body').classList.add('bg-dark');
document.querySelector('.items').lastElementChild.innerHTML = '<h1>Hello</h1>';
});
以上代码是一个事件监听器，当按钮被点击时触发。在事件处理函数中，我们阻止了按钮的默认行为，并通过修改元素的样式来改变背景颜色。同样，我们还使用document.querySelector('.items')选择到具有类名items的元素，并通过.lastElementChild选择最后一个子元素。然后，我们使用.innerHTML将其内容改为<h1>Hello</h1>。
表单验证和消息提示
myForm = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const msg = document.querySelector('.msg');
const userList = document.querySelector('#users');
myForm.addEventListener('submit', onSubmit);
function onSubmit(e) {
e.preventDefault();
if (nameInput.value === '' || emailInput.value === '') {
alert('please enter fields');
} else {
console.log('success');
}
}
以上代码是一个表单提交事件监听器，在表单提交时触发。我们首先使用document.querySelector()选择到表单和对应的输入字段，并将它们保存到变量中。然后，我们使用addEventListener()添加了一个事件监听器，在表单提交时调用onSubmit函数。
在onSubmit函数中，我们通过检查nameInput.value和emailInput.value是否为空来验证表单输入是否有效。如果有任何一个为空，我们通过alert()弹出提示框告知用户需要填写所有字段。否则，我们会在控制台输出"success"。
添加消息提示、异步删除和动态添加列表项
myForm = document.querySelector('#my-form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const msg = document.querySelector('.msg');
const userList = document.querySelector('#users');
myForm.addEventListener('submit', onSubmit);
function onSubmit(e) {
e.preventDefault();
if (nameInput.value === '' || emailInput.value === '') {
msg.classList.add('error');
msg.innerHTML = 'please enter fields';
setTimeout(() => msg.remove(), 3000);
} else {
const li = document.createElement('li');
li.appendChild(document.createTextNode(`${nameInput.value}: ${emailInput.value}`));
userList.appendChild(li);
nameInput.value = '';
emailInput.value = '';
}
}
以上代码是一个表单提交事件监听器，在表单提交时触发。我们首先使用document.querySelector()选择到表单、输入字段、消息提示和用户列表，并将它们保存到相应的变量中。然后，我们使用addEventListener()添加了一个事件监听器，在表单提交时调用onSubmit函数。
在onSubmit函数中，我们首先阻止默认的表单提交行为。然后，我们检查nameInput.value和emailInput.value是否为空来验证表单输入是否有效。如果有任何一个为空，我们会在消息提示元素上添加错误类名，并将内容设置为"please enter fields"。然后，我们使用setTimeout()函数在3秒后移除消息提示。
如果输入字段都有有效值，我们通过document.createElement()创建一个li元素，并通过appendChild()将${nameInput.value}: ${emailInput.value}作为文本节点添加到li元素中。接下来，我们使用userList.appendChild(li)将li元素添加到用户列表中。
最后，我们清空输入字段的值，以便下一次提交使用。
3360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
