3.交互JavaScript

JavaScript

前端

发布日期: 2021-08-05

更新日期: 2021-08-06

文章字数: 9.8k

阅读时长: 41 分

阅读次数:

1.简介

1.1. 什么是Javascript

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事
件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web
互动、加强用户体验度等。

1.2. JavaScript发展史

大概在1992年,一家称作Nombas的公司开始开发一种叫做C– –(C-minus-minus,简称Cmm)的嵌入式脚
本语言。保持与C（和C++）的相似性，以便开发人员能很快学会。Nombas最终把Cmm的名字改成了
ScriptEase，而这种嵌入式脚本的理念也成为因特网的一块重要的基石。
1995年，Netscape(网景)公司的布兰登与Sun 公司联手开发一个称为 LiveScript 的脚本语言。为了营
销便利，之后更名为 JavaScript(目的是在 Java 这课大树下好乘凉)。一个完整的JavaScript实现是由以下
3个不同部分组成的。

ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更
完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript代码是不能运行的，
JavaScript只能够寄生在某个具体的环境中才能够工作。JavaScript运行环境一般都由宿主环境和执行期
环境共同构成，其中宿主环境是由外壳程序生成的，如Web浏览器就是一个外壳程序，它提供了一个可
控制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的JavaScript引擎（或称为JavaScript解
释器）生成，在这个环境中 JavaScript能够生成内置静态对象，初始化执行环境等。

Web浏览器自定义的DOM组件，以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需
的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象，是我们用传统的方法(javascript)
获得的对象。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
前面的DOM是为了操作浏览器中的文档，而为了控制浏览器的行为和操作(BOM)，浏览器还提供了
BOM（浏览器对象模型）。

简单的说就是下面这种结构

1.2.1. ECMAScript(基础语法)

JavaScript的核心语法ECMAScript描述了该语言的语法和基本对象

1.2.2. BOM(浏览器对象模型)

浏览器对象模型（BOM）—— 描述了与浏览器进行交互的方法和接口

1.2.3. DOM(文档对象模型)

文档对象模型（DOM）—— 描述了处理网页内容的方法和接口

1.3. 开发工具

浏览器: chrome或火狐
Hbuilder或Eclipse等等
进入“控制台”console：浏览器F12

1.3.0.1. 控制台的作用

console对象代表浏览器的JavaScript控制台，用来运行JavaScript命令，常常用来显示网页运行时候
的错误信息。Elements用来调试网页的html和css代码。

2.语法格式

2.1. 注释

可以将注释插入 JS代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也
不会显示它们。

COPY// 这里的内容就是注释
/* 这里的内容就是注释 */
/*
也可以这样多行注释
*/

2.2. 行内式

行内式将JS定义在具体html元素中。以行内式写的JS耦合度高，这种写法会使得页面非常杂乱无
章，真正开发中实际上是使用嵌入式或引入外部JS文件的方式。

1 2	COPY<!-- 行内式实现点击事件，点击后加载一个警告框 --> <button onclick="alert('you clicked hered!!!')">click here</button>

2.3. 嵌入式

嵌入式通过在html页面内容开辟一段属于JS的代码区域，通常做法为在 <body> 标签中嵌套<script> 标签。

COPY<!-- 页面加载后执行一个警告框 -->
<script type="text/javascript" charset="utf-8">
// 页面加载后执行一个警告框
alert('this is inner js code');
</script>

2.4. 引入外部文件

在实际开发当中，很多时候都使用引入外部文件，这种形式可以使html页面更加清晰。
hello.js

1 2	COPY// 页面加载后执行一个警告框 alert('this is a outter js document');

index.html

1 2	COPY<!-- 引入外部js文件 --> <script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

注意：
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部
分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。

放在 <head> 部分，最常用的方式是在页面中head部分放置 <script> 元素，浏览器解析head部
分就会执行这个代码，然后才解析页面的其余部分。
放在 <body> 部分，JavaScript代码在网页读取到该语句的时候就会执行。
在已经有了写好的js代码，直接使用是非常简单的，但是我们需要学习的是JS的写法，使用JS的基
本语法，结合BOM和DOM两种接口来操作浏览器中的元素，使得我们的页面能够具有动态的效果。

3.JavaScript基础语法

3.1. 语句

JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语
句。
语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句
结束。多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结
尾。
表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这
样会产生一些没有任何意义的语句。

COPY// 一条普通的语句 支持一行写多条语句 ';'分隔
var num = 2 * 3; var str = '我是字符串';
alert(num);
alert(str);

3.2. 关键字

关键字也称保留字，是被JavaScript征用来有特殊含义的单词

abstract	arguments	boolean	break	byte
case	catch	char	class	const
continue	debugger	default	delete	do
double	else	enum	eval	export
extends	false	final	finally	float
for	function	goto	if	implements
import	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

3.3. 标识符

标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范
规则：由 Unicode字母 、 _ 、 $ 、数字 、 中文 组成

不能以数字开头
不能是关键字和保留字
严格区分大小写

规范：

见名知意
驼峰命名或下划线规则

COPYvar a = 1;
var abc = "1";
var _test = "test";
var $name = "张三";
var age1 = 18;
var userPwd = "a1b2c3";
var USER_AGE = 20;

3.4. 变量

变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数
据。万能的盒子。

3.4.1. 变量的声明

JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
变量声明和赋值：

COPY// 先声明再赋值
var a;
a = 10;
// 声明同时赋值
var b = 20;

3.4.2. 变量的注意点

a. 若只声明而没有赋值，则该变量的值为undefined。

1 2	COPYvar box; console.log(box); // 在浏览器F12的控制台打印

b. 变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义

1
2
3

COPYvar max = 100;
console.log(max);
console.log(min); // 未声明就使用，报错变量未定义min is not defined

c. 可以在同一条var命令中声明多个变量。

COPY// 声明了aa, bb没有赋值 声明了cc同时赋值10
var aa, bb, cc = 10;
var a = 10, b = 10, c= 10;
console.log(aa, bb, cc);

d. 若使用var重新声明一个已经存在的变量，是无效的。

1
2
3

COPYvar box = 10
var box;
console.log(box);

e. 若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

1
2
3

COPYvar box = 10
var box = 25
console.log(box);

f. JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的
值。

1 2	COPYvar box = 'hello world' console.log(box);

3.5. 数据类型

虽说JS是弱类型语言，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进行不
同的操作。JavaScript 中有6 种数据类型，其中有五种简单的数据类型：undefined、Null、布尔、数值
和字符串。一种复杂数据类型Object。

类型	描述
数值（Number）	整数和小数（比如 1 和 3.14）
字符串（String）	字符组成的文本（比如”Hello World”）
布尔值（Boolean）	true（真）和 false（假）两个特定值
undefined	表示“未定义”或不存在，即此处目前没有任何值
Null	表示空缺，即此处应该有一个值，但目前为空
对象（object）(引用)	各种值组成的集合

3.5.1. undefined

undefined类型的值是undefined。
undefined 是一个表示”无”的原始值，表示值不存在。
当声明了一个变量而没有初始化时，这个变量的值就是undefined

1 2	COPYvar box; console.log('box-----' + box); // undefined

3.5.2. null

null类型是只有一个值的数据类型，即特殊的值null。
undefined派生自null，所以等值比较返回值是true。
它表示空值，即该处的值现在为空，它表示一个空对象引用。

1	COPYvar box = null;// 空值

3.5.3. boolean 布尔

布尔类型有两个值：true、false。常用来做判断和循环的条件。

1	COPYvar flag = true;

3.5.4. 数值型

数值型包含两种数值：整型和浮点型。

1 2	COPYvar num1 = 1;// 整型 var num2 = 1.23;// 浮点型

3.5.5. 字符串

使用 '' 或 "" 引起来，如：'sxt' ， "good" 。
使用加号 + 可以进行字符串的拼接，如： console.log('hello' + ' everybody'); ，结果
为 'helloeverybody' 。

1
2
3

COPYvar str1 = 'sxt';
var str2 = "good";
var str3 = 'hello' + ' everybody';

3.5.6. 函数

函数是具有某个功能的代码块

1
2
3

COPYfunction f() {
// 具有功能的代码块
}

3.6. 类型转换

很多时候，我们在进行数据运算或输出等操作时需要将数据在不同类型之间进行转换，这里我们主
要掌握数值型和字符串。

3.6.1. 数值型(转换函数)

JS提供了 parseInt() 和 parseFloat() 两个全局转换函数。前者把值转换成整数，后者把值转
换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是
NaN(Not a Number) 。

3.6.1.1. parseInt()

parseInt() 在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数
字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符。

COPYconsole.log(parseInt("1234blue")); // return 1234
console.log(parseInt("0xA")); // return 10
console.log(parseInt("22.5")); // return 22
console.log(parseInt("blue")); // return NaN

3.6.1.2. parseFloat()

parseFloat() 方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找
到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一
个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把
这个小数点之前的字符串转换成数字。

COPYconsole.log(parseFloat("1234blue")); //return 1234
console.log(parseFloat("22.5")); //return 22.5
console.log(parseFloat("22.34.5")); //return 22.34
console.log(parseFloat("0908")); //return 908
console.log(parseFloat("blue")); //return NaN

3.6.2. 字符串

几乎每个数对象都提供了toString()函数将内容转换为字符串形式。最为简单的转换为字符串的方
式，直接在任意数据后面 + '' 或 "" 即可。

COPYvar data = 10;
console.log(data.toString());// "10"
data = true;
console.log(data.toString());// "true"
// toString()不能对null和undefined使用
data = null;
// 会报错Uncaught TypeError: Cannot read property 'toString' of null
// console.log(data.toString());
data = undefined;
// 会报错Uncaught TypeError: Cannot read property 'toString' of null
// console.log(data.toString());
// 拼接字符串可以对null和undefined使用
data = null + '';
console.log(data.toString());
data = undefined + "";
console.log(data.toString());

3.7. 运算符

运算符用于执行程序代码运算，会针对一个及其以上操作数来进行运算。

3.7.1. 算数运算符

运算符	描述	例子y = 5	结果
+	加	x = y + 2	x = 7
-	减	x = y - 2	x = 3
*	乘	x = y * 2	x = 10
/	除	x = y / 2	x = 2.5
%	求余数	x = y % 2	x = 1
++	自增	x = ++y	x = 6
–	自减	x = –y	x = 4

3.7.2. 赋值和扩展运算符

运算符	例子x = 10, y = 5	等价于	结果
=	x = y	x = 5
+=	x += y	x = x + y	x = 15
-=	x -= y	x = x - y	x = 5
*=	x *= y	x = x * y	x = 50
/=	x /= y	x = x / y	x = 2
%=	x %= y	x = x % y	x = 0

3.7.3. 比较运算符

运算符	描述	例子x = 5
==	等于	x == 8 为 false
===	全等（值和类型）	`x===5` 为 true；`x==="5"` 为 false
!=	不等于	x != 8 为 true
>	大于	x > 8 为 false
<	小于	x < 8 为 true
>=	大于或等于	x >= 8 为 false
<=	小于或等于	x <= 8 为 true

3.7.4. 逻辑运算符

运算符	描述	例子x = 5, y = 2
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x == 5 \|\| y == 5) 为 true
!	not	!(x == y) 为 true

3.7.5. 三目运算符

运算符	描述	例子
? :	如果…否则…	3 > 5 ? 3 : 5

COPYvar a = 3;
var b = 5;
// 3大于5吗(返回true|false) ? 大于(true)返回a : 小于(false)返回b
var result = a > b ? a : b;
console.log(result);

3.8. 控制语句

我们写的JavaScript代码都是按照从上到下依次执行，很多时候我们希望代码按照我们的意愿去执
行，比如有选择性地执行某些代码，或者重复地执行某些代码，这就需要使用到流程控制语句。
流程控制语句一共有三种：

a.流程执行: 从上到下，从左到右
b.选择执行: 分支选择
c.循环执行: 重复执行

3.8.1. 选择执行

3.8.1.1. 单选择

1
2
3

COPYif (条件表达式) {
语句体;
}

首先执行条件，如果结果为true，则执行语句体；如果结果为false，则结束if语句。注意：若语句体
只有一条语句，可以省略大括号，但不建议省略

3.8.1.2. 双选择

COPYif (条件表达式) {
语句体1;
} else {
语句体2;
}

首先执行条件，如果结果为true，则执行语句体1；如果结果为false，则执行语句体2。

3.8.1.3. 多选择

COPYif (条件表达式1) {
语句体1;
} else if (条件表达式2) {
语句体2;
} else if (条件表达式3) {
语句体3；
}
...
[else {
语句体n+1;
}]

3.8.2. 循环执行

循环结构用于重复执行某个操作，简单理解就是重复执行同类型的代码，它有多种形式，这里我们
主要掌握for循环。

COPYfor (初始化语句; 判断条件语句; 控制条件语句) {
循环体语句;
}
for (var i = 0; i < 10; i++) {
console.log(i);
}

3.8.2.1. break与continue

break: 停止本层循环

continue: 暂停本次循环，继续下一次

3.9. 数组

数组（array）是按次序排列的一组数据，每个值的位置都有编号（从 0 开始），整个数组用方括号
表示。Js中定义数组的三种方式如下（也可先声明再赋值）：

COPYvar arr = []; // 创建一个空数组
var arr = [值1, 值2, 值3]; // 创建一个数组并赋值
var arr = new Array(值1, 值2, 值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定长度

3.9.1. 创建

COPY// 数组的创建
var arr1 = [];
console.log(arr1.length); // 长度为0
var arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length); // 长度为5
var arr3 = new Array(1, '2', 3.3);
console.log(arr3.length); // 长度为3
var arr4 = new Array(3);
console.log(arr4.length); // 长度为3

3.9.2. 基本操作

数组的长度可以通过 length 属性来获取，并可以任意更改

获取： 数组名.length

更改： 数组名.length = 新长度

数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界

获取： 数组名[下标]

更改：数组名[下标] = 新值

COPYvar arr2 = [1, '2', 3.3, true, null];
console.log(arr2.length); // 长度为5
var arr4 = new Array(3);
// console.log(arr4.length); // 长度为3
// 修改长度后，原来已有的数据会被丢失，返回undefined
arr2.length = 3
console.log(arr2.length);
console.log(arr2[3]);
// 获取一个不存在的位置，不会报错越界，会返回undefined
console.log(arr4[5]);

3.9.3. 数组的遍历

数组的遍历即依次访问数组的每一个元素，可以用for循环进行遍历。

COPYfor (var i = 0; i < 数组.length; i++) {
数组名[i]是获取元素
};
var arr = [1, '2', 3.3, true, null];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

3.10. 函数

函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同
的值。函数也是对象。

3.10.1. 函数的定义

我们可以通过函数声明语句和函数定义表达式来初始化一个函数。

3.10.1.1. 函数声明语句

COPYfunction 函数名([参数列表]){
}
// 声明函数
function foo1() {
console.log('foo1');
}
// 调用函数
foo1();

3.10.1.2. 函数定义表达式

以表达式方式定义的函数，函数的名称是可以不需要的

COPYvar 变量名 = function ([参数列表]) {
}
变量名();
// 声明函数
var foo2 = function () {
console.log('foo2');
}
// 调用函数
foo2();

这种写法是将一个匿名函数赋值给变量。

3.10.2. 函数的参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫
参数，定义时的参数称为形参，调用时的参数称为实参。

a. 实参可以省略，那么对应形参为undefined
b. 若函数形参同名（一般不会这么干），在使用时以最后一个值为准。
c. 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
d. 参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。

COPY// 调用函数时，实参可以省略，则对应形参为undefined
function func1(a, b) {
console.log(a + "+" + b + "=" + (a + b));
}
func1(3, 4, 5); // 3+4=7
func1(1); // 1+undefined=NaN
func1(); // undefined+undefined=NaN
// 给参数默认值
function func2(a=1, b=2) {
return a + b;
}
console.log('参数默认值-----' + func2());// 3
console.log('参数默认值-----' + func2(5, 7));// 12
// 参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。
function func3(obj) {
obj[6] = "我是第六个值"; // 在函数内操作了数组，因为是同一个对象的原因，外部也可以获取到
}
var arr = [1, "2", 3.14, true, null];
// 调用函数
func3(arr);
console.log(arr[6]); // 函数内操作的数据，因为是同一个对象的原因，外部也可以获取到

3.10.3. 函数的调用

常用调用方式： 函数名([实参]);
存在返回值可以变量接收，若接收无返回值函数则为undefined。

COPYfunction add(a, b) {
return a + b;
}
var sum = add(1, 2)
console.log(sum)

3.10.4. return语句

函数的执行可能会有返回值，需要使用return语句将结果返回。return语句不是必需的，如果没有的
话，该函数就不返回任何值，或者说返回undefined。
作用：
在没有返回值的方法中，用来结束方法。
有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。

3.10.5. 函数的作用域

函数作用域：全局(global variable)和局部(local variable)

COPYvar a = 1; // 全局变量
function func() {
var b = 2; // 局部变量
console.log("全局变量a-->" + a);
console.log("局部变量b-->" + b);
}
func();
console.log("---------------------------");
// a可以访问
console.log("全局变量a-->" + a);
// b不能访问
console.log("b-->" + b);

4. JavaScript内置对象

4.1. String

charAt(idx)：返回指定位置处的字符。
indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
substr(m,n)：返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末
尾。
substring(m,n)：返回给定字符串中从m位置开始，到n位置结束，不包含n位，如果参数n省略，则意味
着取到字符串末尾。
toLowerCase()：将字符串中的字符全部转化成小写。
toUpperCase()：将字符串中的字符全部转化成大写。
replace(s1, s2)：替换，将s1替换为s2。
length: 属性，不是方法，返回字符串的长度。

COPY// charAt(idx)：返回指定位置处的字符
var msg = 'IT is very good!';
var result = msg.charAt(1); // T
console.log(result, result.length);
// indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
var result = msg.indexOf("very");// 6
console.log(result);
// substr(m, n)：返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末
尾。
result = msg.substr(1, 8); // T is ver
console.log(result, result.length);
// substring(m,n)：返回给定字符串中从m位置开始，到n位置结束，不包含n位，如果参数n省略，则意味
着取到字符串末尾。
result = msg.substring(1, 8); // T is ve
console.log(result, result.length);
// toLowerCase()：将字符串中的字符全部转化成小写。
result = msg.toLowerCase(); // it is very good!
console.log(result, result.length);
// toUpperCase()：将字符串中的字符全部转化成大写。
result = msg.toUpperCase(); // IT IS VERY GOOD!
console.log(result, result.length);
// replace(s1, s2)：将s1字符串替换为s2字符串
result = msg.replace('IT', 'it');
console.log(result, result.length);

4.2. Math

Math.random()：生成随机数
Math.ceil()：向上取整
Math.floor()：向下取整
Math.round()：四舍五入取整

COPYvar num = Math.random(); // 生成大于0小于1的浮点数
console.log(num);
num = Math.ceil(3.11223); // 向上取整 4
console.log(num);
num = Math.floor(3.55667); // 向下取整 3
console.log(num);
num = Math.round(3.11223); // 四舍五入 3
console.log(num);

4.3. Date

COPY// 获取日期时间
getFullYear()年, getMonth()月, getDate()日, getDay()周,
getHours()时,getMinutes()分,getSeconds()秒
// 设置日期时间
setFullYear(), setMonth(), ...
toLoacaleString()

说明：
a. getMonth() ：得到的值： 0~11 （1月12月）
b. setMonth() ：设置值时` 011 </span> c. <span style="color: #FD6E05;">toLocaleString() `：可根据本地时间把 Date 对象转换为字符串，并返回结果。

COPY// 获取日期时间
var current_date = new Date(); // 创建一个日期对象
console.log(current_date);
current_date_time = current_date.getFullYear(); // 年
console.log(current_date_time);
current_date_time = current_date.getMonth() + 1; // 月，返回的是0~11
console.log(current_date_time);
current_date_time = current_date.getDay(); // 周
console.log(current_date_time);
current_date_time = current_date.getDate(); // 日
console.log(current_date_time);
current_date_time = current_date.getHours(); // 时
console.log(current_date_time);
current_date_time = current_date.getMinutes(); // 分
console.log(current_date_time);
current_date_time = current_date.getSeconds(); // 秒
console.log(current_date_time);
// 返回一个本地时间的字符串
currrent_date_time = current_date.toLocaleString();
console.log(currrent_date_time);
// 设置日期时间
current_date.setFullYear(2008);
current_date.setMonth(7);
current_date.setDate(8);
current_date.setHours(20);
current_date.setMinutes(8);
current_date.setSeconds(8);
console.log(current_date.toLocaleString());

5. JavaScript操作BOM对象

ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）
则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无
关。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器厂商会按照各自的想法随意去
扩展它。于是，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程
度上是由于他们提供了与浏览器的互操作型。W3C为了把浏览器中JavaScript最基本的部分标准化，已经
将BOM的主要方面纳入了HTML5的规范当中。

5.1. window对象

BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过
JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任
何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页面中
包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通
过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

5.1.1. 系统对话框

浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向
用户显示消息。
a. 消息框:alert，常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
b. 输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
c. 确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

COPY<div id="dv">this is a div</div>
<button onclick="test_alert();">消息框</button>
<button onclick="test_prompt();">输入框</button>
<button onclick="test_comfirm();">确认框</button>
<script type="text/javascript">
// 消息框
function test_alert() {
alert('消息框！');
}
// 输入框
function test_prompt() {
var item = prompt('请输入年龄'); // item得到输入的值
alert(item);
alert(prompt('请输入年龄', 18)); // 将输入的值输出
}
/*
确认框
返回值：boolean（true|false）
*/
function test_comfirm() {
var result = confirm('真的要改吗？');
if (result) {
// DOM操作
var ele = document.getElementById("dv");
ele.style.color = "red";
ele.innerHTML = "<span>div is red</span>";
} else {
alert("没事别瞎点");
}
}
</script>

5.1.2. 打开窗口

window.open() 方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

COPY<input type="button" onclick='openBaidu();' />
<script type="text/javascript">
function openBaidu() {
window.open('http://www.baidu.com', '_blank');// 新窗口打开百度
window.open("http://www.baidu.com", "_self");// 当前窗口打开百度
// window.open(); // 空白窗口
}
</script>

5.1.3. 时间函数

setTimeout() ：在指定的毫秒数后调用函数或计算表达式，只执行一次。
setInterval() ：在指定的毫秒数后不停的调用函数或计算表达式，多次执行。
通过返回的标识也可以 clearTimeout() ， clearInterval() 来清除指定函数的执行。

COPY <h1 id="h1"></h1>
 <input type="button" value="停止显示时间" onclick='stopShow();' />
<script type="text/javascript">
// 延迟3 秒后出现 alert
/*
function hello() {
alert("对不起, 久等了！");
}
window.setTimeout("hello()", 3000);
*/
// 不停的打印当前时间，当时间秒数为0时显示为红色
function showTime() {
// 拿到当前时间
var date = new Date();
var time = date.toLocaleString();
// 拿到相应对象
var h1 = document.getElementById('h1');
h1.innerHTML = time;
console.log(date.getSeconds());
var sec = date.getSeconds();
sec = sec % 10; // 对10取余
// 根据需求添加样式
if(0 == sec) { // 当时间的秒数变成0时，显示红色字体
h1.innerHTML = '<span style="color:red">' + time + '</span>';
}
}
/*
* 定时操作
* 第一个参数：执行的方法；
* 第二个参数：定时，单位是毫秒
*/
// 接收setInterval()返回的标识值
var timeout = window.setInterval(showTime, 1000);
// 停止操作
function stopShow() {
window.clearInterval(timeout); // 返回的标识值用来停止函数
}
</script>

5.2. location对象

location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功
能。也
可通过 window.location 属性来访问。
location 对象的属性 href ：设置或返回完整的 URL；
location 对象的方法 reload() ：重新加载当前文档。

COPY<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
<script type="text/javascript">
function openBaidu() {
// 用新的文档替换当前文档
window.location.href = "http://www.baidu.com";
}
</script>

5.3. document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对
HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过
window.document 属性对其进行访问。
document对象的body属性，提供对元素的直接访问，在Document对象中我们会详细的讲
解。该对象作为DOM中的核心对象存在。

6. 案例练习

6.1. 九九乘法表

利用控制语句实现九九乘法表的打印。

COPY<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>九九乘法表</title>
	</head>
	<body>
		<!--
逻辑推导过程
<table>
<tr>
<td style="border: 1px solid black;">1 * 1 = 1</td>
</tr>
<tr>
<td style="border: 1px solid black;">1 * 2 = 2</td>
<td style="border: 1px solid black;">2 * 2 = 4</td>
</tr>
<tr>
<td style="border: 1px solid black;">1 * 3 = 2</td>
<td style="border: 1px solid black;">2 * 3 = 6</td>
<td style="border: 1px solid black;">3 * 3 = 9</td>
</tr>
</table>
-->
		<script type="text/javascript">
			// 使用DOM对象创建一个table，并写入body
			document.write("<table>");
			// 外圈控制行数
			for (var i = 1; i <= 9; i++) {
				// 使用DOM对象创建一个tr，并写入到body的table中
				document.write("<tr>");
				// 内圈控制个数
				for (var j = 1; j <= i; j++) {
					// 使用DOM对象创建一个td，并写入到body中的table中的tr中
					//console.log(i + " * " + j + " = " + i*j);
					document.write("<td style='border: 1px solid black;'>" + j +
						" * " + i + " = " + i * j + "</td>");
				}
				document.write("</tr>");
			}
			document.write("</table>");
		</script>
	</body>
</html>

演示效果：

6.2. 程序员求签

利用HTML+CSS+JS开发具有动态效果的程序员求签工具。

COPY<!-- 必须写在HTML文件首行 -->
<!DOCTYPE html>
<!-- HTML文档的开始 -->
<html>
	<!-- HTML文档的开头部分 -->
	<head>
		<!-- 文档属性 告诉浏览器采用什么编码解析文档 -->
		<meta charset="utf-8" />
		<!-- 文档标题 -->
		<title>程序员求签</title>
		<!-- 引入外部css文件 -->
		<link rel="stylesheet" href="css/good_luck.css" />
		<!-- HTML文档的开头结束 -->
	</head>
	<!-- HTML文档的主体部分开始 -->
	<body>
		<!-- 内容 -->
		<div id="container">
			<!-- 标题 -->
			<div id="title">
				程序员求签<sup>beta</sup><!-- sup上标字 -->
			</div>
			<!-- 详细信息 -->
			<div id="info">
				<b>求</b>婚丧嫁娶亲友疾病编程测试升职跳槽陨石核弹各类吉凶
			</div>
			<!-- 日期时间 -->
			<div id="date"></div>
			<!-- 求签部分 -->
			<div id="good_luck">
				<ul>
					<li>编码测试修复提交之前求一签，可避凶趋吉</li>
					<li>选择所求之事并在心中默念，再单击“求”即可</li>
					<li>同一件事只能求一次，下次再求请刷新页面</li>
				</ul>
				<table id="table">
					<tr>
						<td>编码</td>
						<td>测试</td>
						<td>修复BUG</td>
						<td>提交代码</td>
						<td>其他</td>
					</tr>
				</table>
			</div>
			<!-- 求签结果 -->
			<div id="result">
				<div id="check">请点击所求之事</div>
				<div id="ask">求</div>
				<div id="answer">超大吉</div>
			</div>
			<!-- 引入外部js文件 -->
			<script type="text/javascript" src="js/good_luck.js"></script>
		</div>
		<!-- HTML文档的主体部分结束 -->
	</body>
	<!-- HTML文档的结束 -->
</html>

good_luck.css

COPY/* 采用什么编码解析文件 */
@charset "utf-8";

/*
* 使用id选择器渲染id="container"标签的样式
*/
#container {
	width: 350px;
	/* 宽350px */
	margin: 50px auto;
	/* 顶部外间距50px 居中 */
}

/* -------------------------标题 begin------------------------- */
/*
* 使用id选择器渲染id="title"标签的样式
*/
#title {
	background: gray;
	/* 背景色灰色 */
	color: white;
	/* 字体白色 */
	font-weight: bold;
	/* 字体加粗 */
	font-size: 20px;
	/* 字体大小 */
	padding: 10px 20px;
	/* 设置内间距 */
	margin-bottom: 10px;
	/* 设置底部外间距10px */
}

/* -------------------------标题 end--------------------------- */
/* -------------------------详细信息 begin---------------------- */
/*
* 使用id选择器渲染id="info"标签的样式
*/
#info {
	font-size: 12px;
	/* 字体大小 */
	text-align: center;
	/* 文本居中 */
	color: red;
	/* 字体红色 */
}

/*
* 使用id选择器定位id="info"标签
* 然后渲染其子标签b的样式
*/
#info b {
	background: crimson;
	/* 背景色深红色 */
	color: white;
	/* 字体白色 */
	padding: 0 3px;
	/* 设置内间距 */
	margin: 0 3px;
	/* 设置外间距 */
}

/* -------------------------详细信息 end------------------------ */
/* -------------------------日期时间 begin---------------------- */
/*
* 使用id选择器渲染id="date"标签的样式
*/
#date {
	font-size: 22px;
	/* 字体大小 */
	font-weight: bold;
	/* 字体加粗 */
	line-height: 40px;
	/* 行间距 */
	text-align: center;
	/* 居中 */
	border-bottom: 1px solid gray;
	/* 底部边框颜色灰色 粗细1px */
}

/* -------------------------日期时间 end------------------------ */
/* -------------------------求签部分 begin---------------------- */
/*
* 使用id选择器渲染id="good_luck"标签的样式
*/
#good_luck {
	font-size: 14px;
	/* 字体大小 */
}

/*
* 使用id选择器定位id="table"标签
* 然后渲染其子标签tr的子标签td的标签样式
*/
#table tr td {
	width: 100px;
	/* 宽100px */
	background: #CCCCCC;
	/* 背景色 */
	padding: 10px 0;
	/* 设置顶部和底部内间距10px 左右为0 */
	text-align: center;
	/* 居中 */
	cursor: pointer;
	/* 鼠标变手势 */
	border-radius: 2px;
	/* 边角变圆角 */
}

/* 添加鼠标移动至指定元素的样式修改 */
#table tr td:hover {
	background: #AAAAAA;
	/* 背景色 */
}

/* -------------------------求签部分 end------------------------ */
/* -------------------------求签结果 begin---------------------- */
/*
* 使用id选择器渲染id="result"标签的样式
*/
#result {
	height: 200px;
	/* 高度200px */
	border: 2px solid #FFAAAA;
	/* 边框颜色 粗细2px */
	margin-top: 10px;
	/* 设置外间距 */
	position: relative;
	/* 子标签相对于父标签定位 */
	overflow: hidden;
	/* 超出标签范围内容隐藏 */
}

/*
* 使用id选择器渲染id="check"标签的样式
*/
#check {
	text-align: center;
	/* 居中 */
	font-size: 30px;
	/* 字体大小 */
	padding-top: 70px;
	/* 设置顶部内间距70px */
}

/*
* 使用id选择器渲染id="ask"标签的样式
*/
#ask {
	background: crimson;
	/* 背景色深红色 */
	position: absolute;
	/* 相对于父标签使用绝对定位 */
	top: 205px;
	/* 从父标签顶部开始计算 */
	left: 0px;
	/* 从父标签左部开始计算 */
	width: 100%;
	/* 宽度是其父元素的100% */
	height: 100%;
	/* 高度是其父元素的100% */
	font-size: 100px;
	/* 字体大小 */
	font-weight: bold;
	/* 字体加粗 */
	cursor: pointer;
	/* 鼠标变手势 */
	text-align: center;
	/* 居中 */
	line-height: 200px;
	/* 行间距 */
	color: white;
	/* 字体白色 */
	transition: all 0.5s;
	/* 所有样式改变效果耗时0.5秒 */
}

/*
* 使用id选择器渲染id="answer"标签的样式
*/
#answer {
	background: white;
	/* 背景色白色 */
	position: absolute;
	/* 相对于父标签使用绝对定位 */
	top: 205px;
	/* 从父标签顶部开始计算 */
	left: 0px;
	/* 从父标签左部开始计算 */
	width: 100%;
	/* 宽度是其父元素的100% */
	height: 100%;
	/* 高度是其父元素的100% */
	font-size: 100px;
	/* 字体大小 */
	font-weight: bold;
	/* 字体加粗 */
	cursor: pointer;
	/* 鼠标变手势 */
	text-align: center;
	/* 居中 */
	line-height: 200px;
	/* 行间距 */
	transition: all 0.5s;
	/* 所有样式改变效果耗时0.5秒 */
}

/* -------------------------求签结果 end------------------------ */

good_luck.js

COPY/*
 * 页面加载以后就执行的函数
 */
window.onload = function() {
	// 创建日期对象
	var today = new Date();
	// 创建数组并初始化数组
	var weeks = ["日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 "];
	// 拼接字符串得到一个中文日期，并设置为id="date"的div标签的内容
	document.getElementById('date').innerHTML = "今天是 " + today.getFullYear() +
		"年 " + (today.getMonth() + 1) + "月 " + today.getDate() + "日 星期" +
		weeks[today.getDay()];
	// 根据标签名称获取所有td标签
	var tds = document.getElementsByTagName('td');
	// 循环遍历td标签，给每一个td都添加一个点击事件
	for (var i = 0; i < tds.length; i++) {
		// 添加点击事件
		tds[i].onclick = function() {
			// 根据id获取id="asd"的div标签，并设置其top属性为0px(标签样式0.5秒移动至0px)
			document.getElementById('ask').style.top = '0px';
			// 根据id获取id="card"的div标签，并设置其display属性为none(隐藏div)
			document.getElementById('check').style.display = 'none';
			// 根据id获取id="answer"的div标签，并设置其top属性为205px(标签样式0.5秒移动至205px)
		document.getElementById('answer').style.top = '205px';
	}
}
// 创建数组并初始化数组
var results = ['超大吉', '大吉', '吉', '小吉', '小凶', '凶', '大凶', '超大凶'];
// 根据id获取id="asd"的div标签，并添加点击事件
document.getElementById('ask').onclick = function() {
	// 生成一个0~7的随机数
	var num = Math.floor(Math.random() * 8);
	// 根据随机数(下标)获取results数组内对应的求签结果，并设置为id="answer"的div标签的内容
	document.getElementById('answer').innerHTML = results[num];
	// 根据id获取id="answer"的div标签，并设置其top属性为0px(标签样式0.5秒移动至0px)
	document.getElementById('answer').style.top = '0px';
	// 根据id获取id="asd"的div标签，并设置其top属性为205px(标签样式0.5秒移动至205px)
	document.getElementById('ask').style.top = '205px';
}
}

演示效果：

小轩同学

http://1530624156.github.io/2021/08/05/3-jiao-hu-javascript/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小轩同学 !

JavaScript

Wox+Everything结合使用

2021-08-06 实用软件

实用软件快捷办公

2.炫酷CSS

2021-08-05 前端

CSS

1.简介

1.1. 什么是Javascript

1.2. JavaScript发展史

1.2.1. ECMAScript(基础语法)

1.2.2. BOM(浏览器对象模型)

1.2.3. DOM(文档对象模型)

1.3. 开发工具

1.3.0.1. 控制台的作用

2.语法格式

2.1. 注释

2.2. 行内式

2.3. 嵌入式

2.4. 引入外部文件

3.JavaScript基础语法

3.1. 语句

3.2. 关键字

3.3. 标识符

3.4. 变量

3.4.1. 变量的声明

3.4.2. 变量的注意点

3.5. 数据类型

3.5.1. undefined

3.5.2. null

3.5.3. boolean 布尔

3.5.4. 数值型

3.5.5. 字符串

3.5.6. 函数

3.6. 类型转换

3.6.1. 数值型(转换函数)

3.6.1.1. parseInt()

3.6.1.2. parseFloat()

3.6.2. 字符串

3.7. 运算符

3.7.1. 算数运算符

3.7.2. 赋值和扩展运算符

3.7.3. 比较运算符

3.7.4. 逻辑运算符

3.7.5. 三目运算符

3.8. 控制语句

3.8.1. 选择执行

3.8.1.1. 单选择

3.8.1.2. 双选择

3.8.1.3. 多选择

3.8.2. 循环执行

3.8.2.1. break与continue

3.9. 数组

3.9.1. 创建

3.9.2. 基本操作

3.9.3. 数组的遍历

3.10. 函数

3.10.1. 函数的定义

3.10.1.1. 函数声明语句

3.10.1.2. 函数定义表达式

3.10.2. 函数的参数

3.10.3. 函数的调用

3.10.4. return语句

3.10.5. 函数的作用域

4. JavaScript内置对象

4.1. String

4.2. Math

4.3. Date

5. JavaScript操作BOM对象

5.1. window对象

5.1.1. 系统对话框

5.1.2. 打开窗口

5.1.3. 时间函数

5.2. location对象

5.3. document对象

6. 案例练习

6.1. 九九乘法表

6.2. 程序员求签

你的赏识是我前进的动力