前言
JavaScript（简称“JS”）用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：
- HTML 用来定义网页的内容，例如标题、正文、图像等；
- CSS 用来控制网页的外观，例如颜色、字体、背景等；
- JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
JavaScript 诞生于 1995 年，几乎是和互联网同时出现；Node.js 诞生于 2009 年，比 JavaScript 晚了 15 年左右。
Node.js 是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用
在 HTML 中使用JavaScript的方法
html文档中嵌入 JavaScript 代码
使用 script 标签来包裹javascript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
document.write("<h2>第一个javascript程序</h2>")
</script>
</head>
<body>
</body>
</html>
将JavaScript单独写在一个文件中，html中引用它
将js代码写在文档里，然后将文档扩展名改为 .js ，即可在html中引用此js脚本，也可以在编辑器中依靠node.js环境直接运行
在 标签内插入一个 标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js脚本.js"></script>
</head>
<body>
</body>
</html>
js文件
alert("html导入了此js脚本")
浏览器显示
JavaScript 代码执行顺序
浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据 标签在html中的位置来确定的。
使用浏览器测试下面示例，会看到 JavaScript 代码从上到下逐步被解析的过程。
<!DOCTYPE html>
<script>
alert("顶部脚本");
</script>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script>
alert("头部脚本");
</script>
</head>
<body>
<h1>网页标题</h1>
<script>
alert("页面脚本");
</script>
<p>正文内容</p>
</body>
<script>
alert("底部脚本");
</script>
</html>
在浏览器中浏览上面示例网页，首先弹出提示文本“顶部脚本”，然后显示网页标题“test”，接着弹出提示文本“头部脚本”，下面才显示一级标题文本“网页标题”，继续弹出提示文本“页面脚本”， 接着显示段落文本“正文内容”，最后弹出提示文本“底部脚本”。
注释
单行注释使用 //
多行注释使用 /* 开头，并以 */ 结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js脚本.js"></script>
<script>
// 对html文档进行写入
document.write("<h2>第一个javascript程序</h2>") // 也可以在末尾使用 // 进行注释
/*
document.write("<p>123</p>>")
document.write("<p>456</p>>")
*/
</script>
</head>
<body>
</body>
</html>
声明变量和赋值
- var：函数外使用var的作用域是全局，函数内使用var的作用域在此函数里。var没有块级（{}）作用域，在块中使用var，全局也是可以访问的
- let：使用 let 关键字声明的变量只在其所在的代码块({})中有效（类似于局部变量），并且在这个代码块中，同名的变量不能重复声明；
- const 关键字的功能和 let 相同，但使用 const 关键字声明的变量还具备另外一个特点，那就是 const 关键字定义的变量，一旦定义，就不能修改，并且声明变量时必须设置初始值。
// 先声明变量再赋值
var name;
name = '小帅'
// 声明变量并赋值
var age=18;
var a, b, c; // 同时声明多个变量
var d=1, e=2, f=3; // 同时声明多个变量并赋值
const cc=123;
let bb = 456;
数据类型
JavaScript 中的数据类型可以分为两种类型：
- 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
- 引用数据类型：对象（Object）、数组（Array）、函数（Function）。
typeof 操作符
typeof x; // 获取变量 x 的数据类型
typeof(x); // 获取变量 x 的数据类型
1. JS 基本数据类型
String 类型
字符串（String）类型是一段以单引号 ''或双引号 ""包裹起来的文本
var str = "Let's have a cup of coffee."; // 双引号中包含单引号
var str = 'He said "Hello" and left.'; // 单引号中包含双引号
var str = 'We\'ll never give up.'; // 使用反斜杠转义字符串中的单引号
Number 类型
数值（Number）类型用来定义数值，JavaScript 中不区分整数和小数（浮点数），统一使用 Number 类型表示，如下例所示：
var num1 = 123; // 整数
var num2 = 3.14; // 浮点数
Boolean 类型
布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，您除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值，例如：
var a = true; // 定义一个布尔值 true
var b = false; // 定义一个布尔值 false
var c = 2 > 1; // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1; // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false
Null 类型
Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。
使用 typeof 操作符来查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。
Undefined 类型
Undefined 也是一个只有一个值的特殊数据类型，表示未定义。当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined。例如：
var num;
console.log(num); // 输出 undefined
在使用 typeof 操作符查看未赋值的变量类型时，会发现它们的类型也是 undefined。对于未声明的变量，使用 typeof 操作符查看其类型会发现，未声明的变量也是 undefined，示例代码如下：
var message;
console.log(typeof message); // 输出 undefined
console.log(typeof name); // 输出 undefined
Symbol 类型
Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值，Symbol 类型的值需要使用 Symbol() 函数来生成，如下例所示：
var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1); // 输出 Symbol(123)
console.log(sym2); // 输出 Symbol(123)
console.log(sym1 == sym2); // 输出 false ：虽然 sym1 与 sym2 看起来是相同的，但实际上它们并不一样，根据 Symbol 类型的特点，sym1 和 sym2 都是独一无二的
2. JS 引用数据类型
Object 类型
JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号 { }，语法格式如下：
{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}
其中 name1、name2、name3、...、nameN 为对象中的键，value1、value2、value3、...、valueN 为对应的值。
在 JavaScript 中，对象类型的键都是字符串类型的，值则可以是任意数据类型。要获取对象中的某个值，可以使用 对象名.键的形式，如下例所示：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
console.log(person.name); // 输出 Bob
console.log(person.age); // 输出 20
Array 类型
数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号 [ ]，数组中的每个元素使用逗号进行分隔，例如：
[1, 2, 3, 'hello', true, null]
另外，也可以使用 Array() 函数来创建数组，如下例所示：
var arr = new Array(1, 2, 3, 4);
console.log(arr); // 输出 [1, 2, 3, 4]
数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，以此类推。如下例所示：
var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]); // 输出索引为 0 的元素，即 1
console.log(arr[5]); // 输出索引为 5 的元素，即 true
console.log(arr[6]); // 索引超出了范围，返回 undefined
Function 类型
函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行，如下例所示：
function sayHello(name){
return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res); // 输出 Hello, Peter
此外，函数还可以存储在变量、对象、数组中，而且函数还可以作为参数传递给其它函数，或则从其它函数返回，如下例所示：
var fun = function(){
console.log("http://c.biancheng.net/js/");
}
function createGreeting(name){
return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result); // 输出 Hello, Peter
运算符
加、减、乘、除、取余
var x = 10,
y = 4;
console.log("x + y =", x + y); // 输出：x + y = 14
console.log("x - y =", x - y); // 输出：x - y = 6
console.log("x * y =", x * y); // 输出：x * y = 40
console.log("x / y =", x / y); // 输出：x / y = 2.5
console.log("x % y =", x % y); // 输出：x % y = 2
赋值运算符
赋值运算符用来为变量赋值，下表中列举了 JavaScript 中支持的赋值运算符：
| 运算符 | 描述 | 示例 |
|---|---|---|
| = | 最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量 | x = 10 表示将变量 x 赋值为 10 |
| += | 先进行加法运算，再将结果赋值给运算符左侧的变量 | x += y 等同于 x = x + y |
| -= | 先进行减法运算，再将结果赋值给运算符左侧的变量 | x -= y 等同于 x = x - y |
| *= | 先进行乘法运算，再将结果赋值给运算符左侧的变量 | x*= y 等同于 x = x * y |
| /= | 先进行除法运算，再将结果赋值给运算符左侧的变量 | x /= y 等同于 x = x / y |
| %= | 先进行取模运算，再将结果赋值给运算符左侧的变量 | x %= y 等同于 x = x % y |
字符串运算符
JavaScript 中的 +和 +=运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：
+运算符表示将运算符左右两侧的字符串拼接到一起；+=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量。
示例代码如下：
var x = "Hello ";
var y = "World!";
var z = x + y;
console.log(z); // 输出：Hello World!
x += y;
console.log(x); // 输出：Hello World!
自增、自减运算符
自增、自减运算符用来对变量的值进行自增（+1）、自减（-1）操作，下表中列举了 JavaScript 中支持的自增、自减运算符：
| 运算符 | 名称 | 影响 |
|---|---|---|
| ++x | 自增运算符 | 将 x 加 1，然后返回 x 的值 |
| x++ | 自增运算符 | 返回 x 的值，然后再将 x 加 1 |
| --x | 自减运算符 | 将 x 减 1，然后返回 x 的值 |
| x-- | 自减运算符 | 返回 x 的值，然后将 x 减 1 |
var x;
x = 10;
console.log(++x); // 输出：11
console.log(x); // 输出：11
x = 10;
console.log(x++); // 输出：10
console.log(x); // 输出：11
x = 10;
console.log(--x); // 输出：9
console.log(x); // 输出：9
x = 10;
console.log(x--); // 输出：10
console.log(x); // 输出：9
比较运算符
比较运算符用来比较运算符左右两侧的表达式，比较运算符的运算结果是一个布尔值，结果只有两种，不是 true 就是 false。下表中列举了 JavaScript 中支持的比较运算符：
| 运算符 | 名称 | 示例 |
|---|---|---|
| == | 等于 | x == y 表示如果 x 等于 y，则为真 |
| === | 全等 | x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真 |
| != | 不相等 | x != y 表示如果 x 不等于 y，则为真 |
| !== | 不全等 | x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真 |
| < | 小于 | x < y 表示如果 x 小于 y，则为真 |
| > | 大于 | x > y 表示如果 x 大于 y，则为真 |
| >= | 大于或等于 | x >= y 表示如果 x 大于或等于 y，则为真 |
| <= | 小于或等于 | x <= y 表示如果 x 小于或等于 y，则为真 |
var x = 25;
var y = 35;
var z = "25";
console.log(x == z); // 输出： true
console.log(x === z); // 输出： false
console.log(x != y); // 输出： true
console.log(x !== z); // 输出： true
console.log(x < y); // 输出： true
console.log(x > y); // 输出： false
console.log(x <= y); // 输出： true
console.log(x >= y); // 输出： false
逻辑运算符
逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值，只能有两种结果，不是 true 就是 false。下表中列举了 JavaScript 中支持的逻辑运算符：
| 运算符 | 名称 | 示例 |
|---|---|---|
| && | 逻辑与 | x && y 表示如果 x 和 y 都为真，则为真 |
| ! | 逻辑非 | !x 表示如果 x 不为真，则为真 |
var year = 2021;
// 闰年可以被 400 整除，也可以被 4 整除，但不能被 100 整除
if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
console.log(year + " 年是闰年。");
} else{
console.log(year + " 年是平年。");
}
输出
某些情况下，我们可能需要将程序的运行结果输出到浏览器中，JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容：
- 使用 alert() 函数来弹出提示框；
- 使用 confirm() 函数来弹出一个对话框；
- 使用 document.write() 方法将内容写入到 HTML 文档中；
- 使用 innerHTML 将内容写入到 HTML 标签中；
- 使用 console.log() 在浏览器的控制台输出内容。
接下来我们来分别介绍一下这 5 种不同的输出语句。
1. alert() 函数
使用 JS alert() 函数可以在浏览器中弹出一个提示框，在提示框中我们可以定义要输出的内容，语法格式如下：
alert(message);
其中 message 为要在提示框中输出的内容，需要注意的是，alert() 中只能输出文本内容。
alert() 函数是 window 对象下的一个函数，所以有时为了代码更严谨，我们也可以使用 window.alert() 的形式来调用 alert() 函数。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 11,
b = 5;
window.alert("a * b = " + a * b);
</script>
</body>
</html>
2. confirm() 函数
JS confirm() 函数与 alert() 函数相似，它们都是 window 对象下的函数，同样可以在浏览器窗口弹出一个提示框，不同的是，使用 confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("你点击了“确定”按钮");
}else{
alert("你点击了“取消”按钮");
}
</script>
</body>
</html>
3. console.log()
使用 JS console.log() 可以在浏览器或者编辑器的控制台输出信息，我们通常使用 console.log() 来调试程序，其语法格式如下：
console.log(message);
其中 message 为要输出的内容，可以是字符串或者对象类型。
4. document.write()
使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码，语法格式如下：
document.write(exp1, exp2, exp3, ...);
其中 exp1、exp2、exp3 为要向文档中写入的内容，document.write() 可以接收多个参数，即我们可以一次向文档中写入多个内容，内容之间使用逗号进行分隔。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>现在的时间是：</p>",Date());
</script>
</body>
</html>
5. innerHTML
与前面介绍的几个函数不同，innerHTML 是一个属性而不是一个函数，通过它可以设置或者获取指定 HTML 标签中的内容，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="demo">JavaScript 输出</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"
</script>
</body>
</html>
函数
定义函数
JS 函数声明需要以 function 关键字开头，之后为要创建的函数名称，function 关键字与函数名称之间使用空格分开，函数名之后为一个括号 ( )，括号中用来定义函数中要使用的参数（多个参数之间使用逗号 ,分隔开），一个函数最多可以有 255 个参数，最后为一个花括号 { }，花括号中用来定义函数的函数体（即实现函数的代码）
示例代码：
function sayHello(name){
document.write("Hello " + name);
}
函数表达式
函数表达式与声明变量非常相似，是另外一种声明函数的形式，语法格式如下：
var myfunction = function name(parameter\_list){
// 函数中的代码
};
var myfunction = function (parameter\_list){
// 函数中的代码
};
参数说明如下：
- myfunction：变量名，可以通过它来调用等号之后的函数；
- name：函数名，可以省略（一般情况下我们也会将其省略），如果省略那么该函数就会成为一个匿名函数；
- parameter_list：为参数列表，一个函数最多可以有 255 个参数。
示例代码：
// 函数声明
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// 函数表达式
var getSum = function(num1, num2) {
var total = num1 + num2;
return total;
};
上面示例中的两个函数是等价的，它们的功能、返回值、调用方法都是相同的。
注意：在函数声明中，不需要在右花括号后放置分号，但若使用函数表达式就应该在表达式的最后以分号结尾。
函数声明和函数表达式虽然看起来非常相似，但它们的运行方式是不同的，如下例所示：
declaration(); // 输出: function declaration
function declaration() {
document.write("function declaration");
}
expression(); // 报错：Uncaught TypeError: undefined is not a function
var expression = function() {
document.write("function expression");
};
如上例所示，如果函数表达式在定义之前被调用，会抛出异常（报错），但函数声明则可以成功运行。这是因为在程序执行前，JavaScript 会先对函数声明进行解析，因此无论是在函数声明前还是声明后调用函数都是可行的。而函数表达式则是将一个匿名函数赋值给一个变量，所以在程序还没有执行到该表达式之前，相当于函数还未定义，因此无法调用。
事件处理
事件就是当用户与页面进行交互时的操作。例如单击某个链接或按钮，键盘按下任意键，鼠标滑动等。当事件发生时，可以使用JavaScript检测并执行触发后的操作
事件绑定
事件只有与 HTML 元素绑定之后才能被触发，绑定的方法很多，最简单的就是通过 HTML事件属性 来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。
html元素属性绑定
以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick=dj()>点击我</button>
</body>
<script>
function dj() {
alert ("你已触发点击事件")
document.write("<p>点击后所发生的都是触发的事件结果</p>")
}
</script>
</html>
JavaScript DOM 元素属性绑定
下面示例是双击事件，双击事件触发后，开始执行绑定的事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>js内置函数进行事件绑定</h1>
<p>双击下面按钮触发事件处理程序</p>
<button id="bb">按钮</button>
</body>
<script>
function shuangji() {
alert("您双击了按钮")
}
document.getElementById("bb").ondblclick=shuangji;
</script>
</html>
JavaScript DOM 元素方法addEventListener绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<h1>使用js-DOM对象的元素addEventListener</h1>
<h2>事件1</h2>
<p>点击下面按钮，触发点击事件</p>
<button id="sj">按钮</button>
<h2>事件2</h2>
<p>键盘按下任意键，触发按键按下事件</p>
</body>
<script>
dj = function () {
alert('你已触发点击事件')
}
aa = document.getElementById('sj')
aa.addEventListener('click', dj)
document.addEventListener('keydown', (e)=> {
alert(`你已经触发按键按下事件\n按下的键：${e.key}`)
})
</script>
</html>
JavaScript事件
一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。
| 事件 | 描述 |
|---|---|
| 鼠标、键盘事件 | onclick |
| ondblclick | 双击鼠标时触发此事件 |
| onmousedown | 按下鼠标时触发此事件 |
| onmouseup | 鼠标按下后又松开时触发此事件 |
| onmouseover | 当鼠标移动到某个元素上方时触发此事件 |
| onmousemove | 移动鼠标时触发此事件 |
| onmouseout | 当鼠标离开某个元素范围时触发此事件 |
| onkeypress | 当按下并松开键盘上的某个键时触发此事件 |
| onkeydown | 当按下键盘上的某个按键时触发此事件 |
| onkeyup | 当放开键盘上的某个按键时触发此事件 |
| 窗口事件 | onabort |
| onbeforeunload | 当前页面的内容将要被改变时触发此事件 |
| onerror | 出现错误时触发此事件 |
| onload | 页面内容加载完成时触发此事件 |
| onmove | 当移动浏览器的窗口时触发此事件 |
| onresize | 当改变浏览器的窗口大小时触发此事件 |
| onscroll | 当滚动浏览器的滚动条时触发此事件 |
| onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 |
| oncontextmenu | 当弹出右键上下文菜单时触发此事件 |
| onunload | 改变当前页面时触发此事件 |
| 表单事件 | onblur |
| onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 |
| onfocus | 当某个元素获得焦点时触发此事件 |
| onreset | 当点击表单中的重置按钮时触发此事件 |
| onsubmit | 当提交表单时触发此事件 |
对象
在 JavaScript 中几乎所有的东西都是对象。因此，要想有效的使用 JavaScript，首先需要了解对象的工作原理以及如何创建并使用对象。
我们可以将对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）。通数据类型的学习知道，数组是值的集合，每个值都有一个数字索引（从零开始，依次递增）。对象类似与数组，不同的是对象中的索引是自定义的，例如 name（姓名）、age（年龄）、gender（性别）等。
JS 创建对象
您可以使用花括号 { }来创建对象，{ }中用来定义对象中的属性。属性是一个个 键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型，例如字符串、数组、函数或其它对象等。不同的属性之间使用逗号进行分隔。示例代码如下：
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
document.write(this.name);
}
};
提示：在对象中定义的函数通常被称为方法。
上面示例中创建了一个名为 person 的对象，该对象中包含三个属性 name、age、gender 和一个方法 displayName()。displayName() 方法中的 this.name 表示访问当前对象中的 name 属性，会被 JavaScript 解析为 person.name。
在定义对象时，属性名称虽然是字符串类型，但通常不需要使用引号来定义，但是以下三种情况则需要为属性名添加引号：
- 属性名为 JavaScript 中的保留字；
- 属性名中包含空格或特殊字符（除字母、数字、_ 和 $ 以外的任何字符）；
- 属性名以数字开头。
示例代码如下：
var person = {
"first name": "Peter",
"current age": 28,
gender: "Male"
};
访问对象的属性
要访问或获取属性的值，您可以使用 对象名.属性名或者 对象名["属性名"]的形式，如下例所示：
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
document.write(this.name);
}
}
document.write("姓名：" + person.name + "<br>"); // 输出：姓名：Peter
document.write("年龄：" + person["age"]); // 输出：年龄：28
在访问对象属性时，使用 对象名.属性名的形式更易于代码的编写，但并不是所有情况下都可以使用。如果属性名中包含空格或者特殊字符，则不能使用 对象名.属性名的形式来访问对象属性，必须使用 对象名["属性名"]的形式才行，如下例所示：
var person = {
"first name": "Peter",
"current age": 28,
gender: "Male"
};
document.write(person["first name"]); // 输出：Peter
document.write(person.current age); // 报错：missing ) after argument list
使用 对象名["属性名"]的形式访问对象属性相对比较灵活，您除了可以直接通过属性名访问属性外，还可以将属性名称赋值给变量，然后再通过这个变量来访问属性的值，如下所示：
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
var key = "age";
document.write(person[key]); // 输出：28
设置修改对象的属性
使用 对象名.属性名或者 对象名["属性名"]的形式除了可以获取对象的属性值外，也可以用来设置或修改对象的属性值，如下例所示：
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
person.phone = "15012345678";
person.age = 20;
person["name"] = "Peter Parker";
for (var key in person) {
document.write(key + "：" + person[key] + "<br>")
}
输出结果如下所示：
name：Peter Parker
age：20
gender：Male
phone：15012345678
JS 删除对象的属性
您可以使用 delete 语句来删除对象中的属性，如下例所示：
var person = {
name: "Peter",
age: 28,
gender: "Male",
phone: "15012345678"
};
delete person.gender;
delete person["phone"];
for (var key in person) {
document.write(key + "：" + person[key] + "<br>")
}
输出结果如下所示：
name：Peter
age：28
提示：delete 语句是从对象中删除指定属性的唯一方式，而将属性值设置为 undefined 或 null 仅会更改属性的值，并不会将其从对象中删除。
JS 调用对象的方法
您可以像访问对象中属性那样来调用对象中的方法，如下例所示：
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
document.write(this.name);
}
};
person.displayName(); // 输出：Peter
person["displayName"](); // 输出：Peter
表单验证
HTML 表单验证可以通过 JavaScript 完成。
如果表单域 (fname) 为空，该函数会提示一条消息，并返回 false，以防止表单被提交：
JavaScript代码
function validateform() {
let pd = document.forms['form1']['fname'].value;
if (pd == '') {
alert("账号不能为空！")
}
}
html代码
<form name="form1" onsubmit="return validateform()" method="post">
<label>
账号：<input type="text" name="fname">
<button type="submit">提交</button>
</label>
</form>
评论