JavaScript 基础笔记

最新推荐文章于 2020-09-29 11:32:10 发布

qq_43645678

最新推荐文章于 2020-09-29 11:32:10 发布

阅读量2.1w

点赞数 135

分类专栏： # 前端基础文章标签： js js笔记 js基础笔记

本文链接：https://blog.csdn.net/qq_43645678/article/details/93380462

版权

前端基础专栏收录该内容

7 篇文章 3 订阅

订阅专栏

JavaScript 基础笔记

1. 初识 javascript

1.1 JavaScript 简介

JavaScript（缩写：JS）是互联网上最流行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

1.2 JavaScript 特点

脚本语言
- JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行,而JavaScript 是在程序的运行过程中逐行进行解释
基于对象
- JavaScript 是一种基于对象的脚本语言,不仅可以创建对象, 也能使用现有对象
- 内置大量现成对象，编写少量程序可以完成目标
简单
- JavaScript 语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求, 设计简单紧凑
- 可以使用任何文本编辑工具编写
- 只需要浏览器就可以执行程序
动态性
- JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入做出响应
跨平台性
- JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持

1.3 JavaScript 的作用

实现 Web 页面客户端的动态效果
JavaScript 可以输出字符、数字、以及 HTML
动态改变 HTML 内容，属性，样式，动态显示或隐藏 HTML 元素，添加交互行为
验证表单数据
响应事件

1.4 JavaScript 的组成

在这里插入图片描述

1.4.1 ECMAScript

JavaScript的语法标准
ECMA是一个组织，即欧洲计算机制造商协会
ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容

1.4.2 DOM

JavaScript操作网页上的元素的API

1.4.3 BOM

JavaScript操作浏览器的部分功能的API

1.5 JavaScript 的使用场景

网页特效
动态数据处理
移动端开发（RN，Weex）
服务端开发（Node.js）
命令行工具（Node.js）
物联网与人工智能（Ruff）
游戏开发（cocos2d-js）

2. JavaScript 基本语法入门

2.1 JS 书写样式

2.1.1 行内式

虽然可以写在标签的属性中，但是结构与行为耦合，不方便维护，不推荐使用

// 方式一
<button onclick="alert('今天天气很好!');">今天天气?</button>

// 方式二
<a href="javascript:alert('你点疼我了！！');">点我</a>

2.1.2 页内式

<script></script>标签中的js代码一般写在文档的尾部
网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素)
- 需要先加载HTML
- 如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素)
HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行
- 无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续
- 如果把js代码如果写在<head>中, 那么js代码执行完毕之前后续网页无法被加载

// 方法一：文档尾部
<body>
   ......
   <script type="text/javascript">
      alert("今天天气很好！");
   </script>
</body>

// 方法二：文档头部
<head>
	<meta charset="utf-8">
	<script>
		console.log("hello world")
	</script>
</head>

2.1.3 外链式

在 HTML 中从外部引入 JavaScript，通过调用.js 为后缀的文件来引入
从外部引入 JS 文件放在 body 的结尾处，因为网页加载是从上到下加载
如果在开头引入 JS 文件，有些代码不能正确执行
外链式的script代码块中不能编写js代码, 即便写了也不会执行

<script type="text/javascript" src="index.js">
   alert("今天天气很好！"); // 不会被执行
</script>

由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度

<script type="text/javascript" src="01-js书写格式.js"></script>

外链式优势
- 分离HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载

2.2 JS 输入输出

JavaScript 没有任何打印或者输出的函数
JavaScript 可以通过不同的方式来输出数据

2.2.1 弹出警告框

通过 alert()方法输出数据。控制浏览器弹出一个警告框

alert("我是警告框。");

2.2.2 弹出输入框

在网页中弹出输入框，一般用于接收用户输入的信息

prompt("请输入");

2.2.3 弹出提示框

在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用

 confirm("确定要删除？");

2.2.4 写入HTML文档

通过 document.write()方法来输出想要显示的内容
如果在文档已完成加载后执行 document.write()，整个 HTML 页面将被覆盖

document.write("这是输入内容，输入到HTML中")

2.2.5 写入控制台

通过 console.log()将数据写入到控制台，数据只在控制台中显示，并不显示在网页中
通过 console.log()方法写入到控制台中，页面是没有我们输入的这个数据
通常 console.log()被用来检查错误

console.log("Hello World!");
console.warn("警告输出！"); 
console.error("错误输出！");

2.3 JS 注释

JavaScript 注释可用于提高代码的可读性
注释不会被执行,常用来调试程序
注意点
- 单行注释可以嵌套单行注释、多行注释
- 多行注释可以嵌套单行注释
- 多行注释不能嵌套多行注释

1. 单行注释：以 // 开头
2. 多行注释：以 /* 开始，以 */ 结尾

2.4 JS 变量

2.4.1 JavaScript 关键字

JavaScript语言用于程序控制或者执行特定操作的英语单词
它们是被JavaScript语言赋予了特殊含义的英文单词
注意点
- 关键字不能用作变量名、函数名
- 关键字严格区分大小写
常见关键字

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger*	function	this	with
default	if	throw	delete
in	try

常见保留字
第五版非严格模式

class	enum	extends	super
const	export	import

第五版严格模式

implements	package	public	interface
private	static	let	protected
yield

应避免使用的单词
- 那些已经用作 JavaScript 的内置对象或内置函数的名称，如 String 或 parseInt等
- 注意：像 goto、const、byvalue 等，他们是 JavaScript 的一部分
- 但是他们在 JavaScript 中没有定义任何特殊功能，只是为了保持相互兼容而已

2.4.2 JavaScript 变量

变量定义
- 变量是一个标识符，在程序运行过程中用于保存临时数据
- 变量是用于存储信息的"容器"
- 用 var 声明的且未赋初值的变量，值会被设定为 undefined
变量命名
- 必须是字母、数字、下划线或$组成
- 首字母不能是数字
- 不能使用Javascript保留字
- 命名区分大小写
变量的作用域
- 所有函数之外声明的变量，叫全局变量，可被当前文档中任何其他代码所访问
- 在函数内部声明的变量，叫做局部变量，只能在该函数内部访问
- 注意
  - 在函数内声明的变量在函数外使用会出错，引用错误
  - 声明变量要在使用变量之前，如果在使用变量之后声明变量，会返回 undefined
  - 变量名对大小写敏感，a 和 A 代表不同的两个变量
使用变量

1. 声明变量
var name;

2. 给变量赋值
name = "张三"

3. 声明变量时同时赋值
var name = "张三"

2.4.3 JavaScript 常量

JavaScript 中的用 const 来声明定义常量
const 定义的常量必须初始化，不初始化会报错
常量在第一次定义之后不可再次赋值，如果在严格模式下运行会报错
注意
- 在 Firefox 和 Chrome 更早期的版本，Safari 5.1.7 和 Opera 12.00，如果使用 const 定义一个变量，这个变量的值仍然可以修改
- IE6-10 不支持 const，但是 IE11 支持

2.5 JS 数据类型

数据类型指的就是字面量的类型
程序在运行过程中会产生各种各样的临时数据, 为了方便数据的运算和操作, JavaScript对这些数据进行了分类, 提供了丰富的数据类型

2.5.1 typeof 操作符

检测给定变量的数据类型
- 如果这个值未定义：undefined
- 如果这个值是布尔值：boolean
- 如果这个值是字符串：string
- 如果这个值是数值：number
- 如果这个值是对象或null：object
- 如果这个值是函数：function

var message = "哈哈哈";
console.log(typeof(message)); // string
console.log(typeof 123); // number

2.5.2 Undefined 类型

undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义
典型用法
- 变量被声明了，但没有赋值时，就等于 undefined
- 调用函数时，应该提供的参数没有提供，该参数等于 undefined
- 对象没有赋值的属性，该属性的值为 undefined
- 函数没有返回值时，默认返回 undefined

var num1;
console.log(num1); // undefined

var num2 = undefined; 
console.log(num2);//   undefined

function f(x){console.log(x)}
f() // undefined

var o = new Object();
o.p // undefined

var x = f();
x // undefined

2.5.3 Null 类型

null 表示"没有对象"，即该处不应该有值
从逻辑角度看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null值时会返回object的原因
典型用法
- 作为函数的参数，表示该函数的参数不是对象
- 作为对象原型链的终点

var car = null;
alert(typeof car); // object

Object.getPrototypeOf(Object.prototype) // null

Null 和 Undefined 的区别
- Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN
- Null表示一个值被定义了，但是这个值是空值
- Undefined表示缺少值，即此处应该有值，但是还没有定义

2.5.4 Boolean 类型

Boolean 型数据就是逻辑类型，它只能有两个值：true 或 false
主要用来做逻辑判断，true 表示真 false 表示假

var bool = true;
console.log(typeof bool); // boolean
console.log(bool);

2.5.5 Number 类型

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）

var num1= 123; // 整数型
var num2= 3.14; // 浮点型
console.log(typeof num1); // number
console.log(typeof num2); // number

最大数和最小数
- 由于内存的限制，ECMAScript 并不能保存世界上所有的数值

// 最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308

// 最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE);  // 5e-324

// 无穷大：Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity

// 无穷小：-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number

NaN
- 是一个特殊的数字，表示Not A Number
- 使用typeof检查一个NaN也会返回number
- 任何涉及 NaN 的操作都会返回 NaN
- NaN 与任何值都不相等，包括 NaN 本身

alert(NaN == NaN); // false

2.5.6 String 类型

在JS中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var firstName = 'mike';
console.log(typeof firstName); // string

转义字符
- 所有的 ASCII 码都可以用“\”加数字（一般是 8 进制数字）来表示

转义字符	ASCII 码值（十进制）	意义
\a	007	响铃(BEL)
\b	008	退格(BS) ，将当前位置移到前一列
\f	012	换页(FF)，将当前位置移到下页开头
\n	010	换行(LF) ，将当前位置移到下一行开头
\r	013	回车(CR) ，将当前位置移到本行开头
\t	009	水平制表(HT) （跳到下一个 TAB 位置）
\v	011	垂直制表(VT)
\	092	代表一个反斜线字符’’’
’	039	代表一个单引号（撇号）字符
"	034	代表一个双引号字符
?	063	代表一个问号
\0	000	空字符(NULL)
\ooo	三位八进制	1 到 3 位八进制数所代表的任意字符
\xhh	二位十六进制	1 到 2 位十六进制所代表的任意字符

2.5.7 Object 类型

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数……
JavaScript 允许自定义对象，对象只是带有属性和方法的特殊数据类型

例：直接给属性赋值

//对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value)来定义
var person={
	name:"小明", 
	sex:"男", 
	old:20
};

例：通过构造函数来给属性赋值

function person(firstname,lastname,age,eyecolor) { 
	this.firstname=firstname; 
	this.lastname=lastname; 
	this.age=age; 
	this.eyecolor=eyecolor; 
}

2.6 JS 数据类型转换

2.6.1 转换为 Boolean 类型

要将一个值转换为其对应的 Boolean 值，可以调用转型函数 Boolean()

数据类型	转换为 true 的值	转换为 false 的值
Boolean	true	false
String	任何`非空`字符串	“” (`空字符串`)
Number	任何`非零`数字值(包括`无穷大`)	`0`和`NaN`
Object	任何`对象`	`null`
Undefined	`N/A`	`undefined`

2.6.2 转换为 Number 类型

转型函数 Number() 可以用于任何数据类型

Undefined --> Number（返回 NaN）

var str1 = undefined;
var n1 = Number(str1);
console.log(n1); // NaN
==========================================

Null --> Number（返回 0）

var str1 = null;
var n1 = Number(str1);
console.log(n1); // 0
==========================================

Boolean --> Number（true 转成 1, false 转成 0）

var bool1 = true;
var n1 = Number(bool1);
console.log(n1); // 1

var bool2 = false;
var n2 = Number(bool2);
console.log(n2); // 0
==========================================

String --> Number

1.如果是`纯数字`的字符串，则直接将其转换为十进制数值（`前导的零忽略`）

var str1 = "123";
var str2 = "00011";
var res1 = Number(str1);
var res2 = Number(str2);
console.log(res1); // 123
console.log(res2); // 11
console.log(typeof  res1); // number
console.log(typeof  res2); // number
-----------------------------------------------------------------

2.如果字符串中有`非数字`的内容，则转换为NaN，Number()函数中无论混合字符串`是否存在有效整数`都会返回NaN

var str3 = "hello 123";
var res3 = Number(str3);
console.log(res3); // NaN
-----------------------------------------------------------------

3.如果字符串是一个`空串`或者是一个全是`空格`的字符串，则转换为0

var str4 = "";
var res4 = Number(str4);
console.log(res4); // 0

var str5 = "    ";
var res5 = Number(str5);
console.log(res5); // 0

转型函数 parseInt() 与parseFloat()专门用于把字符串转换成数值
- parseInt()/parseFloat()可以提取字符串中的有效整数
- 如果对非String使用parseInt()或parseFloat(), 它会先将其转换为String然后在操作

var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); 		 // NaN
var num3 = parseInt("0xA"); 	 // 10(十六进制）
var num4 = parseInt("22.5"); 	 // 22
var num5 = parseInt("070"); 	 // 56(八进制）
var num6 = parseInt("70"); 		 // 70(十进制）

var num1 = parseFloat("1234blue"); // 1234
var num2 = parseFloat("0xA"); 	   // 0
var num3 = parseFloat("22.5"); 	   // 22.5
var num4 = parseFloat("22.34.5");  // 22.34
var num5 = parseFloat("0908.5");   // 908.5

parseInt() 与parseFloat()区别
- parseInt()只能提取整数
- parseFloat()能提取小数
- parseFloat()始终忽略前导的0，可识别所有浮点数值格式，十六进制的字符串始终转换为0

2.6.3 转换为 String 类型

调用 toString() 方法
- 该方法不会影响到原变量，它会将转换的结果返回
- null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错

Number --> String

var num = 12306;
var str= num .toString();
console.log(str); // 12306
console.log(typeof str); // string
---------------------------------

Boolean --> String
var num1 = true;
var str1 = num1.toString();
console.log(str1 ); // true
console.log(typeof str1 ); // string
------------------------------------

Undefined --> String
var num2 = undefined;
var str2 = num2.toString(); // 报错
console.log(str2 );
------------------------------------

Null --> String
var num3 = null;
var str3= num3.toString(); // 报错
console.log(str3);
-------------------------------------

NaN --> String
var num4 = NaN;
var str4 = num4.toString();
console.log(str4); // NaN
console.log(typeof str4); // String

调用 String() 方法
- 调用String()函数，并将被转换的数据作为参数传递给函数
- 使用String()函数做强制类型转换时
  - 对于Number和Boolean实际上就是调用的toString()方法
  - 对于null和undefined，就不会调用toString()方法, 它会将 null 直接转换为 "null", 将 undefined 直接转换为 "undefined"

var a = null;
a = String(a);
			
b = undefined;
b = String(b);
			
console.log(typeof a); // string
console.log(a); // null

console.log(typeof b); // string
console.log(b); // undefined

2.7 JS 语法规范

2.7.1 JavaScript 分号

编写Javascript注意语法规范，一行代码结束后必须在代码最后加上;
- 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
- 此外，容易加错分号，所以在开发中分号必须要写
JavaScript 分号作用
- 分号用于分隔 JavaScript 语句
- 使用分号在一行中编写多条语句
- 在 javascript 中，用分号来结束语句是可选的

2.7.2 JavaScript 空白字符

JavaScript 空白字符
- JavaScript 会忽略多个空格和换行
- 可以向脚本添加空格，以增强可读性

console.log
 (
     "Hello，JavaScript！"
 );

2.7.3 JavaScript 大小写敏感

JavaScript 对大小写是敏感的
当编写 JavaScript 语句时，请留意是否关闭大小写切换键
函数 getElementById 与 getElementbyID 是不同的
变量 myVariable 与 MyVariable 也是不同的

comfirm("Hello，JavaScript！");   // 正确
COMFIRM("Hello，JavaScript！");   // 错误

2.7.4 JavaScript 标识符

标识符格式
- 标识符中可以含有字母、数字、_、$
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留字
- 在 JavaScript 中预定义的运算符如：+、-、*、/、%不可以用于定义标识符
- 标识符一般都采用驼峰命名法
- 在JS底层保存的标识符采用的是Unicode编码，所以UTF-8中所有的字符都可以作为标识符
Smalltalk 法则
- 每个标识符可以有若干个单词左右连接而成
- 常量标识符应该全部使用大写字母来表示区别
- 一般标识符应该全部使用小写字母以示区别
- 特殊常量标识符应该以大写字母开头以示区别
- 函数的标识符应该以小写字母开头以示区别
- 不要使用JavaScript 中预定义保留的关键字
- JavaScript 严格区分大小写字母

3. JavaScript 基本语法

3.1 运算符

执行变量或值之间的运算的符号
通过运算符可以对一个或多个值进行运算,并获取运算结果
运算符是告诉程序执行特定算术或逻辑操作的符号

3.1.1 进制表示

在JS中可以表示不同进制的数字，得看浏览器支持
- 16进制的数字，则需要以0x开头
- 8进制的数字，则需要以0开头
- 2进制的数字，则需要以0b开头

十六进制数字
num = 0x18;
num = 0xcf;
num = 0xAacf;

八进制数字
num = 016;

二进制数字
num = 0b1010;

注意
- "010"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
- 可以在parseInt()或parseFloat()中传递一个第二个参数，来指定数字的进制

str = "070";
str= parseInt(str,10); // 十进制
str = Number(str);
			
console.log(typeof str);
console.log(str);

3.1.2 算术运算符

算数运算符用于对数字执行算数运算
+的特殊用法
- 连字符，当数字和字符串进行相加时，按拼接字符串的方式进行操作

运算符	描述
+	加
-	减
*	乘
/	除
%	求余数
++	自增
- -	自减

3.1.3 赋值运算符

赋值运算符向 JavaScript 变量赋值

运算符	例子	等同于
=	x = y	x = y
+=	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

3.1.4 比较运算符

返回值只会是 true 或者 false，如果成立则为 true，不然为 false

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
==	等于
===	等值等型
!=	非等于
!==	不等值或不等型
?	三元运算符

3.1.5 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑

运算符	描述
&&	逻辑与
｜｜	逻辑或
!	逻辑非

3.1.6 类型运算符

运算符	描述
typeof	返回变量的类型
instanceof	返回 true，如果对象是对象类型的实例

3.1.7 运算符优先级

在这里插入图片描述

3.2 表达式

表达式是由数字、运算符、分组符号（括号）、变量和常量等以能求得数值的有意义排列方法所得的组合
一个表达式会产生一个值,它可以放在任何需要一个值的地方

3.2.1 简单表达式

3.2.1.1 算术表达式

算术表达式是指由数字和运算符号组成的式子

var m = 5 + 3 * 4; 
document.write(m);

结果：17

3.2.1.2 逻辑表达式

用逻辑运算符将关系表达式或逻辑量连接起来的有意义的式子称为逻辑表达式
逻辑表达式的值是一个逻辑值，即true或false

var m = 9 > 6; 
document.write(m);

结果：true

3.2.1.3 三目表达式

三目表达式就是三元运算符构成的式子

var m = ( 3 > 2 ) ? 3 : 4; 
document.write(m);

结果：3

3.2.2 复杂表达式

3.2.2.1 简单表达式的组合

复杂表达式是由原始表达式和操作符(operator)组合而成，包括属性访问表达式、对象创建表达式和函数表达式

3.2.2.2 表达式的运算优先顺序

运算优先顺序
- 括号→函数→乘方→乘、除→加、减→字符连接运算符→关系运算符→逻辑运算符
- 如果同级的运算是按从左到右次序进行
- 多层括号由里向外

var x; 
var m = ( x = ( 3 > 2 ) ? 9 : 2 ) * ( 3 + ( 5 - 2 ) * 4 ); 
alert( "m is " + m ); 

结果：m is 135

3.3 JS 流程控制

3.3.1 顺序结构

顺序结构是 JavaScript 最基本的结构，说白了就是按照从上到下、从左到右的顺序执行
JavaScript 中，程序总体是按顺序结构执行的，但在顺序结构可包含选择结构和循环结构

例：实现内容的替换

<body> 
	<h1>My Web Page</h1> 
	<p id="demo">A Paragraph.</p> 
	<div id="myDIV">A DIV.</div>
	<script>
 		document.getElementById("demo").innerHTML="Hello World"; 
 		document.getElementById("myDIV").innerHTML="How are you?"; 
 	</script> 
</body>

结果
	My Web Page
	Hello World
	How are you?

3.3.2 选择结构

3.3.2.1 if 语句

基本条件语句
- 只有当指定条件为 true 时，该语句才会执行代码
- 在条件为 false 时执行其他代码
- 使用大写字母（IF）会生成 JavaScript 错误

if (condition) { 
	当条件为 true 时执行的代码 
} else { 
	当条件不为 true 时执行的代码 
}

多重条件语句

if (条件1) { 
	// JavaScript 代码
} else if (条件2) { 
	// JavaScript 代码
} else if (条件3) {
	// JavaScript 代码
}

嵌套条件语句

if (条件1) {
	if (条件) {
		// JavaScript 代码
	} else {
		// JavaScript 代码
	}
} else if (条件2) {
	// JavaScript 代码
}

举例

/*
	BMI计算公式：BMI =体重÷(身高*身高)  65kg,1.74m
	过轻：低于18.5
	正常：18.5-24.99999999
	过重：25-27.9999999
	肥胖：28-32
	非常肥胖, 高于32
*/
	//1.人机交互
	var height = prompt('请输入您的身高：')
	var weight = prompt('请输入您的体重：')
	
	//2.计算BMI
	var bmi = weight / (height * height)
	
	//3.条件判断，显示不同的结论
	if(bmi < 18.5){
	    alert('您的体重太轻了，需要加强营养！')
	}else if(bmi < 25){
	    alert('您的体重正常，非常标准！')
	}else if(bmi < 28){
	    alert('您的体重有点超标，需要注意！')
	}else if(bmi < 32){
	    alert('您的体重有点肥胖了，需要减肥！')
	}else{
	    alert('您的体重超级肥胖，珍惜生命！')
	}

3.3.2.2 switch 语句

switch 语句用于基于不同的条件来执行不同的动作,但条件必须是确定的值
贯穿式条件分支，采用绝对等于判断，等值匹配，数据类型也要匹配
说明
- switch 必须赋初始值，值与每个 case 值匹配
- 满足条件则执行该 case 后的所有语句，并用 break 语句来阻止运行下一个case，结束贯穿执行
- 如所有 case 值都不匹配，执行 default 后的语句

switch(表达式) { 
	case 值 1: 
		执行代码块 1 
	break; 
	case 值 2: 
		执行代码块 2 
	break; 
	... 
	case 值 n: 
		执行代码块 n 
	break; 
	default: 
与 case 值 1 、 case 值 2...
}

举例

/*
	根据星期几（一~日） ，输出特价菜
	“一”、“二”、“三”，输出“干煸扁豆6元.”
	“四”、“五”，输出“蒜茸油麦菜 4元.”
	“六”、“日”，输出“口水鸡 8元.”
	其他，输出“您输入的星期数不正确”
*/

var day = prompt('请输入星期数：')
        
switch(day){
    case 1:
    case 2:
    case 3:alert('特价菜是扁豆！');break;
    case 4:
    case 5:alert('特价菜是白菜！');break;
    case 6:
    case 7:alert('特价菜是口水鸡！');break;
    default:alert('输入的星期数不对！')
}

3.3.3 循环结构

3.3.3.1 for 循坏

for循环语句是在创建循环时常用到的语句，循环次数可以为零

for (初始化变量; 判断条件; 更新迭代){ 
	循环语句 
}

说明
- 初始化变量在整个循环的最开始只执行一次，for 循环中初始化的变量可以在 for 循环之外使用
- for 循环是先执行初始化变量的代码，然后判断条件是否返回 true，如果为 true 则执行循环语句，如果为 false 则不执行循环
- 执行完循环后，执行更新迭代的代码，然后再判断循环条件是否为 true，如果为true再次执行循环语句，直到循环条件返回值 false
- for 循环的 3 个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用 break 语句退出循环，否则就是死循环
举例

// 用 for 循环来输出 0 到 100 的累加值

for (var i = 0,sum=0; i<=100; i++) { 
sum+=i; 
} 
document.write("0 到 100 的累加值是："sum);

结果：
0到100的累加值是：5050

3.3.3.2 while 循环

while 循环在指定条件为真时循环执行代码块，只要指定条件为true，循环就可一直执行

while (条件) { 
	需要执行的代码 
}

3.3.4 程序的继续与终止

3.3.4.1 break 语句

之前的 switch 语句中，break 语句用于跳出 switch()
break 语句用于跳出循环
举例

// 用 break 语句来跳出 for 循环

for (var i = 1; i<8; i++) { 
	document.write(i+"<br/>"); 
	if(i==3){ 
		break; 
	} 
}

结果：
1
2

3.3.4.2 continue 语句

continue 用于跳过循环中的一个迭代，continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）
举例

// 通过 continue 来跳过当前循环，执行下一个循环

for (var i = 1; i<=5; i++) { 
	if(i==3){ 
		continue; 
	}
	document.write(i+"<br/>"); 
} 

结果：
1
2
4
5

总结
- 根据情况的不同，选择使用 break 还是 continue
- break 是跳出整个循环，不管当前循环之后还有没有代码都不再执行
- continue 是跳出当前循环，执行下一个循环

3.4 JS 流程控制练习

3.4.1 成绩统计

// 1. 设置变量
var sum = 0;
var max = 0;
var min = 0;

// 2.  获取课程数
var count = prompt('请输入课程数')

// 3. 循环遍历课程数
for (var i = 1; i <= count; i++) {
    // 3.1 获取每门课程成绩
    var mark = parseInt(prompt('请输入第'+i+'门课程成绩'))

    // 3.2 判断
    if (i == 1) {
        max = mark
        min = mark
    }

    if (min > mark) {
        min = mark
    }

    if (max < mark) {
        max = mark
    }

    sum += mark
    
}

alert("总分："+ sum)
alert("平均数：" + parseInt(sum / count))
alert("最小分：" + min)
alert("最大分："+ max)

3.4.2 打印三角形

// 1. 获取三角形行数
var n = parseInt(prompt('请输入行数'))

// 2. 判断行数
// 2.1 如果大于等于6
if (n >= 6) {
    // 外层行数i循环递减
    for (var i = n; i > 0; i--) {
        // 内层*号递减打印
        for (var j = 0; j < i; j++) {
            document.write('*&nbsp;')
        }
        document.write('<br/>')
    }
} else {
    // 2.2 如果小于6
    // 上半部循环
    // 外层行数i循环递减
    for (var i = n; i > 0; i--) {
        // 内层*号递减打印
        for (var j = 0; j < i; j++) {
            document.write('*&nbsp;')
        }
        document.write('<br/>')
    }
    // 下半部循环
    // 外层行数i循环递增
    for (var i = 0; i <= n; i++) {
        // 内层*号递增打印
        for (var j = 0; j < i; j++) {
            document.write('*&nbsp;')
        }
        document.write('<br/>')
    }
}

3.4.3 九九乘法表

// 获取乘数
var str1 = parseInt(prompt('请输入一个乘数'))
var str2 = parseInt(prompt('请输入另一个乘数'))

// 双层循环遍历
// 外层
for (var i = str1; i <= str2; i++) {
    // 内层
    for (var j = str1; j <= i; j++) {
        document.write(j + '*'+ i + '=' + i*j +'&nbsp;')
    }
    document.write("<br/>")
}

4. JS 函数概念

特点
- 封装到函数中的代码不会立即执行
- 函数中的代码会在函数调用的时候执行
- 调用函数时，函数中封装的代码会按照顺序执行

4.1 函数的定义

函数也是一个对象
函数就是可以重复执行的代码块，是能完成特定功能的一段代码
函数能重复调用，简化程序
函数分为系统函数和自定义函数

4.1.1 函数结构

function 是定义函数的关键字，必不可少
执行代码是在调用该函数的时候，所做的操作，也称为函数体

function 函数名(参数){ 
 	执行代码
 }

4.1.2 函数名

函数名就是函数的名字，自定义，遵循命名规则

function function_name(){ 
	alert("Hello World!"); 
}

函数命名规则
- 区分大小写
- 允许包含字母、数字、下划线、美元符号（$），但是第一个字符不能是数字
- 不允许使用其他字符以及关键字和保留字命名

4.1.3 参数（形参）

函数参数是在调用函数时，向其传递的值，参数是可以为空
增强函数的功能性和函数的可拓展性，便于交互

a,b是形参，占位用，函数定义时形参无值
function f(a,b){}  

x, y实参，有具体的值，会把x,  y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y
f(x, y);

说明
- 参数既可以是变量也可以是常量
- 但是参数为常量就不能发挥函数的灵活性，没有太大的实际意义
- 形参与实参以一致顺序出现，第一个变量值是第一个被传递参数给定的值，以此类推
注意
- 调用函数时解析器不会检查实参的类型, 所以开发中一般需要对参数进行类型的检查
- 函数的实参可以是任意的数据类型
- 调用函数时，解析器不会检查实参的数量, 多余实参不会被赋值, 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
函数作为参数

1. 直接将函数名作为参数，`直接调用`
function test1(Func) { 
	Func(); 
} 
function test2() { 
	alert("我是 test2"); 
} 
test1(test2);

============================================

2. 定义一个调用`带参数的函数`为参数的函数
function test1(Func) { 
	Func(mydata); 
} 
function test2(data) { 
	alert(data); 
}
test1(test2("带参数的函数，作为参数"));

============================================

3. 作为参数的函数`不再单独定义`
function test1(Func) { 
	Func("hello"); 
} 
test1(function(data) { 
	alert(data); 
});

4.2 函数的调用

函数的调用就是在定义一个函数之后，应该如何使用这个函数

例：不同的参数实现同样的效果

<body> 
	<button onclick=" myFunction('小明','男')">实参</button> 
  	<button onclick="myFunction(Name,Sex)">已赋值变量</button> 
  	<button onclick="myFunction(NAME,SEX)">已赋值常量</button> 
</body> 
<script> 
  	var Name = "小明"; 
  	var Sex ="男"; 
  	const NAME ="小明"; 
  	const SEX = "男"; 
  	function myFunction(name,sex){ 
  		alert("name is "+name+" , "+"sex is "+sex); 
  	} 
</script>

4.3 函数的返回值

当一个函数被调用，通常会从函数的开始执行到结束
如果想提前结束该函数的执行可以使用return语句，return语句后面的所有语句将永远不会执行
一般return用于返回结果
注意
- 如果函数没有显示使用 return语句，那么函数有默认的返回值：undefined
- 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
- 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
- 所以要么让函数始终都返回一个值，要么永远都不要返回值

function myFunction(){ 
	var name="小明"; 
	return name; 
	name="小花"; 
}

4.4 函数的拆分

函数拆分可以提高效率
函数拆分常用在函数体代码太多，函数中某一代码多次使用的情况下
函数拆分是视具体情况而定的，根据具体情况、要求不同，拆分的方式也会不同

4.5 函数声明方式

4.5.1 函数声明方式

function add(num1,num2){
  return num1+num2;
}

4.5.2 函数表达式声明方式

var add = function(num1,num2){
	return num1+num2;
};

4.5.3 函数直接声明和函数表达式声明的区别

JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

//  代码没问题  
console.log(f(5,6));
function f(a, b) {
     return a + b;
}

// 报错
myFun(6,7);
var myFun = function (a,b){
   return a + b;
}

4.5.4 Function 构造函数

不推荐使用, 主要用于面向对象时理解"函数就是对象, 函数名就是指针"这一概念

var add = new Function('num1','num2','return num1+num2');

5. JS 函数基础

5.1 内置函数

内置函数，是浏览器内核自带的，不用引入任何函数库就可直接使用的函数

5.1.1 常规函数

函数	描述
alert 函数	显示一个警告对话框，包括一个 OK 按钮
confirm 函数	显示一个确认对话框，包括 OK、Cancel 按钮
escape 函数	将字符转换成 Unicode 码
eval 函数	计算表达式的结果
isNaN 函数	测试是(true)否(false)不是一个数字
parseFloat 函数	将字符串转换成符点数字形式
parseInt 函数	将符串转换成整数数字形式(可指定几进制)
prompt 函数	显示一个输入对话框，提示等待用户输入

5.1.2 数组函数

函数	描述
join 函数	转换并连接数组中的所有元素为一个字符串
length 函数	返回数组的长度
escape 函数	将字符转换成 Unicode 码
reverse 函数	将数组元素顺序颠倒
sort 函数	将数组元素重新排序

5.1.3 日期函数

函数	描述
getDate 函数	返回日期的“日”部分，值为 1～31
getDay 函数	返回星期几，值为 0～6，其中 0 表示星期日，1 表示星期一，…，6 表示星期六
getHours 函数	返回日期的“小时”部分，值为 0～23
getMinutes 函数	返回日期的“分钟”部分，值为 0～59
getMonth 函数	返回日期的“月”部分，值为 0～11。其中 0 表示 1 月，…，11 表示12 月
getSeconds 函数	返回日期的“秒”部分，值为 0～59
getTime 函数	返回系统时间
getTimezoneOffset 函数	返回此地区时差(当地时间与 GMT 格林威治标准时间地区时差)，单位分钟
getYear 函数	返回日期的“年”部分。返回值以 1900 年为基数
parse 函数	返回从 1970 年 1 月 1 日零时整算起的毫秒数(当地时间)
setDate 函数	设定日期的“日”部分，值为 0～31
setHours 函数	设定日期的“小时”部分，值为 0～23
setMinutes 函数	设定日期的“分钟”部分，值为 0～59
setMonth 函数	设定日期的“月”部分，值为 0～11。其中 0 表示 1 月， …， 11 表示 12 月
setSeconds 函数	设定日期的“秒”部分，值为 0～59
setTime 函数	设定时间。时间数值为 1970 年 1 月 1 日零时整算起的毫秒数
setYear 函数	：设定日期的“年”部分
toGMTString 函数	转换日期成为字符串，为 GMT 格林威治标准时间
setLocaleString 函数	转换日期成为字符串，为当地时间
UTC 函数	返回从 1970 年 1 月 1 日零时整算起的毫秒数，以 GMT 格林威治标准时间计算

5.1.4 数学函数（Math）

函数	描述
abs 函数	返回一个数字的绝对值
acos 函数	返回一个数字的反余弦值，结果为 0～π弧度(radians)
asin函数	返回一个数字的反正弦值，结果为-π/2～π/2 弧度
atan 函数	返回一个数字的反正切值，结果为-π/2～π/2 弧度
atan2 函数	返回一个坐标的极坐标角度值
ceil 函数	向上取整
cos 函数	返回一个数字的余弦值，结果为-1～1
exp 函数	返回 e(自然对数)的乘方值
floor 函数	向下取整
log 函数	自然对数函数，返回一个数字的自然对数(e)值
max函数	返回两个数的最大值
min 函数	返回两个数的最小值
pow函数	返回一个数字的乘方值
random 函数	返回一个 0～1 的随机数值
round 函数	返回一个数字的四舍五入值，类型是整数
sin 函数	返回一个数字的正弦值，结果为-1～1
sqrt 函数	返回一个数字的平方根值
tan 函数	返回一个数字的正切值

5.1.5 字符串函数

函数	描述
anchor 函数	产生一个链接点(anchor)以作超级链接用
big 函数	将字体加到一号
blink函数	使字符串闪烁
bold 函数	使字体加粗
charAt 函数	返回字符串中指定的某个字符
fixed 函数	将字体设定为固定宽度字体
fontcolor 函数	设定字体颜色
fontsize 函数	设定字体大小
indexOf 函数	返回字符串中第一个查找到的下标 index，从左边开始查找
italics 函数	使字体成为斜体字
lastIndexOf 函数	返回字符串中第一个查找到的下标 index，从右边开始查找
length 函数	返回字符串的长度
link 函数	产生一个超级链接
small 函数	将字体减小一号
strike 函数	在文本的中间加一条横线。
sub 函数	显示字符串为下标字(subscript)
substring 函数	返回字符串中指定的几个字符
sup 函数	显示字符串为上标字(superscript)
toLowerCase 函数	将字符串转换为小写
toUpperCase 函数	将字符串转换为大写

5.2 自定义函数

定义函数

function 函数名(参数1,参数2,参数3,...){
	// JavaScript 语句;
	[return 返回值]
}

调用函数
- 函数的调用格式
- 函数名();

5.3 匿名函数

匿名函数，即没有函数名的函数
定义匿名函数

var showFun = function(count) {
	for(var i = 0; i < count; i++){
		console.log('hello world');
	}
}

整个语句类似赋值语句: var showFun = 变量值

调用匿名函数
showFun(10)

作用

1. 用在`绑定事件`的时候
document.onclick = function () {
   alert(1);
}

============================================

2. `定时器`
setInterval(function () {
   console.log(444);
},1000);

============================================

3. `立即执行函数`
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次
(function(){alert("hello")})();
(function(num1,  num2){
	console.log("num1 = "+ num1);
	console.log("num2 = "+ num2);
})(100, 101);

5.4 变量作用域

变量作用域是指变量有效性的范围，与变量定义的位置密切相关
作用域是从空间角度来描述变量的，也可以理解为可见性
按作用域不同，变量分局部变量和全局变量
在函数中使用 var 关键字进行显式申明的变量是作为局部变量，而没有用 var 关键字，使用直接赋值方式声明的是全局变量

5.4.1 作用域问题

块级作用域
- 在其它语言中，任何一对花括号中的语句都属于一个块，在这之中定义的所有变量在代码块外都是不可见的
全局作用域
- 在代码的任何位置都可以访问
- script标签中函数外定义的变量
- 隐式全局变量
局部作用域
- 在指定的代码段范围中可以访问
- 函数内部定义的变量
- 局部作用域中可以访问全局变量，全局作用域中不能访问局部变量

5.4.2 全局变量

定义全局变量的方式

例1：在 js 的 function 外定义一个变量

// Sex就是全局变量
var Sex ="男"; 
function count(){ 
	alert(" sex is "+Sex);
}

============================================

例2： 不使用 var,直接给变量赋值，隐式的声明了全局变量 Name

// 这里 Name,Sex 都是全局变量
Name = "小明"; 
var Sex ="男"; 
function count(){ 
	alert("name is "+Name+" sex is "+Sex); 
}

============================================

例3: 使用 window.变量名定义变量，也是全局变量

// 这里 Name,Sex，old 都是全局变量
Name = "小明"; 
var Sex ="男"; 
window.old="19"; 
function count(){ 
	alert("name is "+Name+" sex is "+Sex+"old is"+old); 
}

总结
- 全局变量保存在静态存贮区，程序开始运行时为其分配内存，程序结束释放内存
优点
- 全局变量可减少变量的个数，减少由实际参数和形式参数的数据传递带来的时间消耗
- 函数一般是通过函数参数和返回值进行输入输出，函数内部实现相对独立
缺点
- 与局部变量的动态分配、动态释放相比，生存期比较长
- 过多的全局变量会占用较多的内存单元
- 全局变量破坏了函数的封装性能
- 全局变量使函数的代码可读性降低
- 函数中如果使用全局变量，那函数体内的语句就可绕过函数参数和返回值进行存取，这种情况破坏了函数的独立性，使函数对全局变量产生依赖，同时，也降低了该函数的可移植性
- 由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利

5.4.3 局部变量

局部变量：就是声明在函数体中的变量，并且只能在当前函数体内访问

例：声明两个局部变量

function test() { 
	a = 30; 
	var b = 20; 
}

说明
- 当局部变量与全局变量同名的时候，全局变量会被局部变量覆盖
- 当调用一个用了该变量的函数（该变量在此函数中无定义）时，函数会使用全局变量

5.4.4 变量作用域注意点

函数内部可以访问到该函数所属的外部作用域的变量(作用域链)
不使用var声明的变量是全局变量
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

5.4.5 作用域链相关

其它语言中变量`i`只能在`for`循环内部访问 

1. 局部变量
for (var i = 0; i < 10; i++) {}
console.log(i);

2. 全局变量
var name = "zx";
function f() {
	name = "刘德华";
}
f();
console.log(name);

局部变量, 先在函数内部的作用域找变量`name`，如果找到则使用，如果找不到去父级作用域找`name`变量

function f() {
    var name = "张三";
}
f();
console.log(name);

作用域链
 
var color = "yellow";
function getColor() {
    var anotherColor = "red";

    function swapColor() {
        var tmpColor = color;
        color = anotherColor;
        anotherColor = tmpColor;
    }
    swapColor();
}

getColor();
console.log(color);


结果 red

5.5 变量提升

5.5.1 变量提升概念

声明的变量，会把该声明提升到所在作用域的最顶端
提升的是变量声明，但不包含赋值

function fun(){
    console.log(num); // undefined
    var num = 20;
}

function fun(){
    var num;
    console.log(num); // undefined
    num = 20;
}

5.5.2 函数提升

JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的`最前面

6. JS 数组基础概念

6.1 数组简介

6.1.1 基本定义

数组对象用来在单独的变量名中存储一系列的值，使用方便同时方便对变量的查找（遍历）
数组是一种数据类型, 属于对象，使用关键词 new 来创建数组对象
- 普通对象是使用字符串作为属性名的
- 数组时使用数字来作为索引操作元素
- 数组的存储性能比普通对象要好

var arr = new Array();

6.1.2 创建数组

1. 使用 Array 构造函数

创建一个空数组
var arr1 = new Array();

创建一个长度为30的数组
var arr2 = new Array(30);

创建一个包含2个字符串的数组
var arr3 = new Array("张三","yann");

===============================================

2. 使用数组字面量

创建一个空数组
var arr4 = [];

创建一个长度为30的数组
var arr5 = [30];

创建一个包含2个字符串的数组
var arr6 = ["张三","yann"];

6.1.3 数组的赋值

1. 可以添加`任意多`的值

var mycars = new Array(); 
mycars[0] = "Saab"; 
mycars[1] = "Volvo"; 
mycars[2] = "BMW";

===========================================

2. 可以使用一个`整数自变量`来控制数组的`容量`
var mycars = new Array(3); 
mycars[0] = "Saab"; 
mycars[1] = "Volvo"; 
mycars[2] = "BMW";
var mycars = new Array("Saab","Volvo","BMW");

注意
- 数字0,1,2为数组的索引，用来被遍历时使用的或者用数组字面量(直接量)方便创建数组
- 一个数组字面量是在一对方括号中包裹着一个或多个用 逗号 隔开的表达式
- 数组中的每个值都有索引，从 0 开始

var empty = []; 
var cars=["Saab","Volvo","BMW"];

6.1.4 数组元素的获取

在 JavaScript 种获取数组某一项的值都是通过数组元素的下标来获取

创建一个数组，然后获取数组中的某个字符

var arr=new Array("厦门","福州","漳州","龙岩","泉州"); 
document.write(arr[4]); //泉州

6.2 数组长度

length 属性可设置或返回数组中元素的数目
数组的 length 属性总是比数组中定义的最后一个元素的下标大 1
设置 length 属性可改变数组的大小
- 如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失
- 如果设置的值比其当前值大，数组将增大，新元素被添加到数组的尾部，值为undefined

arrayObject.length
数组的长度 = 数组名.length；

实现如何使用 length 属性返回并设置数组的长度

var arr = new Array(3) 
arr[0] = "John" 
arr[1] = "Andy"
arr[2] = "Wendy" 
document.write("Original length: " + arr.length) 
document.write("<br />") 
arr.length=5 
document.write("New length: " + arr.length) 

结果：
Original length: 3
New length: 5

获取数组中的元素
- 数组中的指定元素 = 数组名[索引值];
- 数组的索引代表的是数组中的元素在数组中的位置，从0开始
- 如果获取数组中元素没有指定索引（元素没那么多），系统不报错，而是给定值为undefined

7. 数组常用方法

7.1 数组元素的插入

7.1.1 `push()`

功能
- 向数组的末尾追加一个或多个元素，并且返回新的长度
格式

数组对象.push(element 1,element 2,…,element n)

举例：实现在数组的尾部添加 f-z.cn 元素

var arr = new Array() 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr + "<br />") 
document.write(arr.push("f-z.cn") + "<br />") 
document.write(arr) 

结果：
George，John，Thomas
4
George，John，Thomas，f-z.cn

7.1.2 `unshift()`

功能
- 直接修改原有的数组，在数组开头添加元素，并返回新数组的长度
格式

数组对象.unshift(element1,element2,…,elementn);

举例：实现在数组的头部添加 f-z.cn 元素

var arr = new Array() 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr + "<br />") 
document.write(arr.unshift("f-z.cn") + "<br />") 
document.write(arr) 

结果：
George，John，Thomas
4
f-z.cn，George，John，Thomas

7.2 数组元素的删除

7.2.1 `pop()`

功能
- 删除并返回数组中的最后一个元素的值
- 数组长度减 1
- 如果数组为空，则 pop() 不改变数组，并返回undefined 值
格式

arrayObject.pop()

举例：实现删除数组的最后一个元素

var arr = new Array(3) 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr + "<br />") 
document.write(arr.pop() + "<br />") 
document.write(arr) 

结果：
George，John，Thomas
Thomas
George，John

7.2.2 `shift()`

功能
- 把数组的第一个元素删除，并返回第一个元素的值
- 如果数组为空，那么 shift() 方法将不进行任何操作，返回 undefined
- 该方法不创建新数组，而是直接修改原有的 arrayObject
格式

arrayObject.shift()

举例：实现删除数组的头元素

var arr = new Array(3)
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr + "<br />") 
document.write(arr.shift() + "<br />") 
document.write(arr) 

结果：
George，John，Thomas
George
John，Thomas

7.3 数组元素的拼接

7.3.1 `concat()`

功能
- concat() 方法用于连接两个或多个数组
  - 先copy一个当前数组
  - 然后将接收到的参数添加到这个copy数组的末尾，最后返回新构建的数组
- 在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回
格式

arr.concat(arrayX,arrayX,arrayX...)

举例：实现数组的链接

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

7.4 数组元素的分隔

7.4.1 `join()`

功能
- 把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔
- 指定的分隔符是可选项，没有指定的话默认是逗号
格式：

arr.join("指定的分隔符")

举例：实现数组元素的连接成字符串

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] ="fenzhen"
document.write(arr.join()+"<br/>") //没有指定分隔符 
document.write(arr.join("$")) //有指定分隔符 

**结果：**
George，John，Thomas，James，fenzhen
Georg$John$Thomas$James$fenzhen

7.5 数组元素的排序

7.5.1 `sort()`

功能
- 数组在原数组上进行排序，不生成副本
- 如果调用该方法时没有使用参数，将按字母顺序(字符编码)对数组中的元素进行排序
  - 要实现这点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较
- 如果想按照其他标准进行排序，就需要提供比较函数
  - 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字
- 比较函数应该具有两个参数 a 和 b，其返回值如下：
  - 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值
  - 若 a 等于 b，则返回 0
  - 若 a 大于 b，则返回一个大于 0 的值
语法

arrayObject.sort(sortby)

举例： 创建一个数组，并按字母顺序进行排序

var arr = new Array(6) 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas"
arr[3] = "James" 
arr[4] = "Adrew" 
arr[5] = "Martin" 
document.write(arr + "<br />") 
document.write(arr.sort()) 

结果：
George，John，Thomas，James，Adrew，Martin
Adrew，George，James，John，Martin，Thomas

===========================================

举例： 创建一个数组，并按数字大小顺序进行排序

function sortNumber(a,b) {
	return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

结果
10,5,40,25,1000,1
1,5,10,25,40,1000

7.5.2 `reverse()`

功能
- 用于颠倒数组中元素的顺序
- 不是创建新的数组，而是改变原来的数组
语法

arrayObject.reverse()

举例： 创建一个数组，然后颠倒其元素的顺序

var arr = new Array(3) 
arr[0] = "George" 
arr[1] = "John" 
arr[2] = "Thomas" 
document.write(arr + "<br />") 
document.write(arr.reverse()) 

结果：
George，John，Thomas
Thomas，John，George

7.6 数组元素的选取

7.6.1 `slice(begin,end)`

功能
- 可从已有的数组中返回选定的元素
- 不会修改数组，而是返回一个子数组
- begin
  - 必需的参数，规定从何处开始选取
  - 如果是负数，那规定从数组尾部开始算起的位置
  - -1 指最后一个元素，-2 指倒数第二个元素，以此类推
- end
  - 规定从何处结束选取
  - 该参数是数组片断结束处的数组下标
  - 如果没有指定该参数，那么切分的数组包含从开始到数组结束的所有元素
  - 如果这个参数是负数，那它规定的是从数组尾部开始算起的元素
格式

arrayObject.slice(begin,end)

举例：实现选择数组中前四个元素

//创建数组的同时对元素赋值 
var arr = new Array("Html","Css","JavaScript","jQuery","bootstrap"); 
document.write("所选的元素为："+"<br/>"+arr.slice(0,4)); 

结果：
所选的元素为：Html，Css，JavaScript，jQuery

7.7 数组元素的返回值

7.7.1 `toString()`

功能
- 可把一个逻辑值转换为字符串，并返回结果
格式

arr.toString()

var arr = new Array("html","css","javascript","jQuery","Ajax"，"fenzhen"); 
document.write(arr.toString()); 

结果：
html，css，javascript，jQuery，Ajax，fenzhen

join()与 tostring()的区别
- join()方法将数组中所有的元素转化为字符串，并将这些字符串用逗号隔开，合并成一个字符串作为方法的结果返回
- 如果调用时给定参数 string,就将 string作为在结果字符串中分开有各个数组元素形成的字符串的分隔符
- toString()方法返回一个包含数组中所有元素，且元素之间以逗号隔开的字符串，该方法在将数值作为字符串使用时强制调用，且无须显示声明此方法的调用

7.7.2 `toLocaleString()`

功能
- 把数组转换为本地字符串
格式

arrayObject.toLocaleString()

toString() 和 toLocaleString() 的区别
- toString()
  - 直接返回标准的格式
- toLocaleString()
  - 先判断是否指定语言环境（locale）
  - 指定的话则返回当前语言环境下的格式设置（options）的格式化字符串
  - 没有指定语言环境（locale），则返回一个使用默认语言环境和格式设置（options）的格式化字符串

7.7.3 `toUTCString()`

功能
- toUTCString() 方法可根据世界时 (UTC) 把 Date 对象转换为字符串，并返回结果
格式

dateObject.toUTCString()

使用 toUTCString() 来把今天的日期转换为（根据 UTC）字符串

var d = new Date() 
document.write (d.toUTCString()) 

结果
Wed, 14 Aug 2019 11:15:43 GMT

三者的区别
- toString()函数用于将当前对象以字符串的形式返回，它的返回值为 String类型
- toUTCString()根据世界时 (UTC) 把 Date 对象转换为字符串
- toLocalString()方法把数组转换为本地字符串，先调用每个数组元素toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串
注意
- toLocaleString 只是用来显示结果给用户
- 最好不要在脚本中用来做基本计算，因为返回的结果是随机器不同而不同的

7.7.4 `toSource()`

功能
- 返回该对象的源代码
- 只有 Firefox 浏览器支持该方法，IE、Safari、Chrome、Opera 等浏览器均不支持该方法
格式

object.toSource()

7.7.5 `valueOf()`

功能
- valueOf() 方法返回 Array 对象的原始值
格式

arr.valueOf()

7.8 数组的查找

7.8.1 `indexOf(value, index)`

功能
- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
- value，需要检索的字符串值
- index，规定在字符串中开始检索的位置，(范围：0 ～ stringObject.length - 1)，如省略该参数，则将从字符串的首字符开始检索
- indexOf() 方法对大小写敏感
- 如果要检索的字符串值没有出现，则该方法返回 -1
- 比较第一个参数与数组中的每一项时，会使用全等操作符
格式

stringObject.indexOf(value,index)

var arr = [2,4,6,8,8,6,4,2];
console.log(arr.indexOf(4)); // 1
console.log(arr.indexOf(4,2)); // 6
console.log(arr.indexOf("4")); // -1

7.8.2 `lastIndexOf(value, index)`

功能
- lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
- value，需要检索的字符串值
- index，规定在字符串中开始检索的位置，(范围：0 ～ stringObject.length - 1)，如省略该参数，则将从字符串的最后一个字符处开始检索
- lastIndexOf() 方法对大小写敏感
- 如果要检索的字符串值没有出现，则该方法返回 -1
- lastIndexOf()方法虽然是从后往前搜索，但返回的位置是从前开始数的
- 比较第一个参数与数组中的每一项时，会使用全等操作符
格式

stringObject.lastIndexOf(value,index)

var arr = [2,4,6,8,8,6,1,4];
console.log(arr.lastIndexOf(4)); // 7
console.log(arr.lastIndexOf(4,4)); // 1

7.9 数组的遍历

7.9.1 `forEach()`

功能
- forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
- forEach() 只支持IE8以上的浏览器
- forEach()方法需要一个函数作为参数
- 浏览器会在回调函数中传递三个参数
  - 第一个参数，就是当前正在遍历的元素
  - 第二个参数，就是当前正在遍历的元素的索引
  - 第三个参数，就是正在遍历的数组
格式

arr.forEach(function(value , index , obj){
  console.log(value);
});

举例 数组元素累加

var sum = 0;
var numbers = [65, 44, 12, 4];

numbers.forEach(function(value, index, obj) {
  myFunction(value) // 65 109 121 125
})

function myFunction(item) {
  sum += item;
  console.log(sum)
}

7.10 splice() 方法

功能
- splice() 方法向从数组中添加/删除项目，然后返回被删除的项目
- 该方法会改变原始数组
- splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素
- 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组
格式

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	规定添加/删除项目的`位置`，使用`负数`可从`数组结尾处`规定位置
howmany	要`删除的项目数量`。如果设置为 0，则不会删除项目
item1, …, itemX	向数组添加的`新项目`

1. 创建一个新数组，并向其添加一个元素

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

结果
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

=============================================================================

2. 删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)

结果
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

=====================================================================================

3. 删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素

r arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

结果
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

8. 数组高级API

8.1 Math 对象

功能
- Math 对象属于一个工具类，用于执行数学任务
- 不用创建对象，直接调用封装好的数学运算相关的属性和方法
语法

var pi_value = Math.PI; 
var sqrt_value = Math.sqrt(15);

属性

属性	描述
Math.E	返回算术常量 e，即自然对数的底数（约等于 2.718）
Math.LN2	返回 2 的自然对数
Math.LN10	返回 10 的自然对数
Math.LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
Math.PI	返回圆周率（PI）
Math.SQRT2	返回 2 的平方根
Math.SQRT1_2	返回 1/2 的平方根

8.1.1 Math 最值

功能
- min() 方法可返回指定的数字中带有最小值的数字
- max() 方法可返回指定的数字中带有最大值的数字
语法

Math.min(n1,n2,n3,...,nX)
Math.max(n1,n2,n3,...,nX)

8.1.2 Math 数值取整

功能
- Math.ceil()
  - 执行向上舍入，即它总是将数值向上舍入为最接近的整数
- Math.floor()
  - 执行向下舍入，即它总是将数值向下舍入为最接近的整数
- Math.round()
  - 执行标准舍入，即它总是将数值四舍五入为最接近的整数

// 对所有介于 25 和 26(不包括 26)之间的数值，Math.ceil()始终返回 26，因为它是向上舍入
alert(Math.ceil(25.9)); //取整后为 26 
alert(Math.ceil(25.5)); //取整后为 26 
alert(Math.ceil(25.1)); //取整后为 26 

// Math.round()方法只在数值大于等于 25.5 时返回 26；否则返回 25
alert(Math.round(25.9)); //取整后为 26 
alert(Math.round(25.5)); //取整后为 26 
alert(Math.round(25.1)); //取整后为 25 

// Math.floor()对所有介于 25 和 26(不包括 26)之间的数值都返回 25
alert(Math.floor(25.9)); //取整后为 25 
alert(Math.floor(25.5)); //取整后为 25 
alert(Math.floor(25.1)); //取整后为 25

8.1.3 Math 绝对值

功能
- Math.abs(x) 返回 x 的绝对（正）值

document.write("0 的绝对值为：",Math.abs(0),"<br>"); 
document.write("1 的绝对值为：",Math.abs(1),"<br>"); 
document.write("-1 的绝对值为：",Math.abs(-1),"<br>"); 

结果：
0 的绝对值为：0
1 的绝对值为：1
-1 的绝对值为：1

8.1.4 Math 随机数

功能
- Math.random() 返回介于 0（包括）与 1（不包括） 之间的随机数，且每次返回的结果都不一样

document.write(Math.random()) 

**结果：**
0.9466723923

8.1.5 Math 平方根

功能
- Math.sqrt(x) 返回 x 的平方根
- 其中参数“x”是必须的，若参数小于 0，则返回 NaN

例：返回几个数的平方根

var a=Math.sqrt(0); // 0
var b=Math.sqrt(1); // 1
var c=Math.sqrt(9); // 3
var d=Math.sqrt(0.64); // 0.8
var e=Math.sqrt(-9); // NaN

8.1.6 Math 幂运算

功能
- Math.pow(x, y) 的返回值是 x 的 y 次幂
- 如果结果是虚数或负数，则该方法将返回 NaN
- 如果由于指数过大而引起浮点溢出，则该方法将返回 Infinity

例：把 pow() 运用到不同的数字组合上

document.write(Math.pow(0,0) + "<br />") // 1
document.write(Math.pow(0,1) + "<br />") // 0
document.write(Math.pow(1,1) + "<br />") // 1
document.write(Math.pow(1,10) + "<br />") // 1
document.write(Math.pow(2,3) + "<br />") // 8
document.write(Math.pow(-2,3) + "<br />") // -8
document.write(Math.pow(2,4) + "<br />") // 16
document.write(Math.pow(-2,4) + "<br />") // 16

8.2 map()

功能
- “映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
	return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

8.3 filter()

功能
- “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
	return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

8.4 every()

功能
- 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
	return x < 10;
}); 
console.log(arr2); //true

var arr3 = arr.every(function(x) {
	return x < 3;
}); 
console.log(arr3); // false

8.5 some()

功能
- 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
	return x < 3;
}); 
console.log(arr2); //true

var arr3 = arr.some(function(x) {
	return x < 1;
}); 
console.log(arr3); // false

8.6 数组方法练习

8.6.1 数组去重

去除数组中重复的部分

暴力法

var arr = [12,3,3,3,4,6,3,5,6,43,8,9]

// 外层循环
for(var i = 0 ; i < arr.length-1 ; i++){
    // 内层循环
    for(var j = i + 1 ; j < arr.length ; j++){
        if(arr[i] == arr[j]){
            arr.splice(j,1)
            j--
        }
    }
}
alert(arr)

8.6.2 猜数字

给出随机数范围，猜数字

var randomNum, guessNum, min=1, max=100, count=0;

// 1. 产生一个随机数 Math.random()
randomNum = Math.floor(100*Math.random()) + 1; // [1-100]

// 2. 不确定的次数，接受用户输入的数字 promot(),使用死循环
while (true) {
  guessNum = prompt('请输入你猜的数字:('+min + '-' + max + ')');
  if (isNaN(guessNum)) { // 判断是否为数字
    alert('请输入数字！');
    continue;    // 中止循环，进入下一次循环
  }
  if (guessNum > max || guessNum < min) { // 判断数字范围是否合理
    alert('请输入合法的数字！')
    continue;
  }

  if(guessNum > randomNum){
    max = guessNum;
  }

  if (guessNum < randomNum){
    min = guessNum;
  }

  count++; // 次数加一
  if (guessNum == randomNum) {    // 比较判断
    alert('恭喜你猜对了，一共猜了'+count+'次'); // 显示结果 alert()
    break;    // 结束游戏，退出死循环
  }
}

8.6.3 排队取号

模拟排队取号流程

var users = [] // 创建一个空数组，存放用户

// 用户增加
function take() {
  // 针对第一个用户
  if ( users.length == 0 ) {
    users.push(1)
  } else {
    // 取出当前数组中最后一个元素的值,加1作为新用户的好码
    users.push(users[users.length-1] + 1)
  }
  alert(users)
}

// 用户减少
function invoice() {
  if ( users.lenth == 0 ) {
    alert('目前没有客户排队等待')
  } else {
    users.shift(); // 队伍中第一个出队
    alert(users)
  }
}

8.6.4 抽奖系统

随机抽奖，直到最后一位全部抽完

var names = ['tom', 'jack', 'mary', 'alex', 'mike']

while (names.length > 0) { // 知道最后一个人抽完
   var index = Math.floor(Math.random()*names.length) // 确定抽奖人数
   alert(names[index]) // 中奖人的位置
   names.splice(index, 1) // 删除中奖人的位置
 }

9. 字符串概念

9.1 字符串定义

JavaScript 字符串用于存储和处理文本
字符串可以是插入到引号中的任何字符(可以使用单引号或双引号)
- 字符串中的引号不要与字符串的引号相同
- 在字符串添加转义字符要使用引号
可以使用索引位置来访问字符串中的每个字符 (字符串的索引从 0 开始)

10. 字符串操作

10.1 获取字符串

10.1.1 直接索引字符串

在 javascript 中，字符串可被当做数组来处理，所以用数组下标的方式来访问单个字符

var str="hello world"; 
console.log(str[0]); //输出 h

10.1.2 `charAt()`

功能
- 返回字符串中指定下标（位置）的字符串
- index 必须是整数（0、1、2……）
格式

string.charAt(index)

var str = "HELLO WORLD";
str.charAt(0);  // 返回 H

10.1.3 `charCodeAt()`

功能
- 返回字符串中指定索引的字符 unicode 编码
格式

string.charAt(index)

var str = "HELLO WORLD";
str.charCodeAt(0);   // 返回 72

10.1.4 数组下标和 charAt() 方式的不同

超出范围的返回值不同
- 使用 string[index]的方式，对于超出字 index 范围的，会返回 undefined
- 使用 charAt(index)的方式，对于超出范围的会返回一个空的字符串
兼容性问题
- string[index]的方式在 IE6～8 下会返回 undefined, 也就是 IE6～8 不兼容此方法
- charAt(index)经测试，在 IE6~8 下也能够正常返回值

10.2 获取字符串的位置

10.2.1 `indexOf()`

功能
- 返回字符串中指定文本首次出现的索引（位置）
格式

string.indexOf(str)

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");  // 17

10.2.2 `lastIndexOf()`

功能
- 返回指定文本在字符串中最后一次出现的索引
格式

string.lastIndexOf(str)

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");  // 51

10.3 字符串的连接

10.3.1 `concat()`

功能
- 用于连接两个或多个字符串格式
- 该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串
- concat() 方法将把所有参数转换成字符串，然后按顺序连接到字符串 stringObject 的尾部，并返回连接后的字符串
格式

stringObject.concat(stringX,stringX,...,stringX)

举例：实现 Hello 和 world! 两段字符串的连接

function myFunction(){ 
	var txt1 = "Hello "; 
	var txt2 = "world!"; 
	var n=txt1.concat(txt2); 
	document.getElementById("demo").innerHTML=n; 
}

结果：
Hello World！

10.3.2 `+`

举例：实现两个字符串的连接

var arr01 = "hello";
var arr02 = "world";

console.log(arr01 + arr02);  //  helloworld

10.4 字符串的分隔

10.4.1 `split()`

功能
- split() 方法用于把一个字符串分割成字符串数组
- str参数，从该参数指定的地方分割 stringObject
- len参数，该参数可指定返回的数组的最大长度
  - 如果设置了该参数，返回的子串不会多于这个参数指定的数组
  - 如果没有设置该参数，整个字符串都会被分割，不考虑它的长度
- 该数组是通过在 str 指定的边界处将字符串 stringObject 分割成子串创建的返回的数组中的字串不包括 str 自身
- 如果把空字符串 ("") 用作 str，那么 stringObject 中的每个字符之间都会被分割
格式

stringObject.split(str,len)

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

结果
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

10.5 字符串的截取

10.5.1 `substr()`

功能
- substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符
- start 为要抽取的子串的起始下标，必须是数值
  - 如果是负数，那么该参数声明从字符串的尾部开始算起的位置
  - -1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推
- length 为子串中的字符数，必须是数值
  - 如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串
格式

stringObject.substr(start,length)

var str="Hello world!"
document.write(str.substr(3,7))

结果
lo worl

10.5.2 `substring()`

功能
- substring() 方法用于提取字符串中介于两个指定下标之间的字符
  - 返回一个新的字符串，其内容是从 start 处到stop-1 处的所有字符，其长度为 stop 减 start
- start 一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置
- stop 一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1
  - 如果省略该参数，那么返回的子串会一直到字符串的结尾
- 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0的字符串）
- 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数
格式

stringObject.substring(start,stop)

举例：使用 substring() 从字符串中提取一些字符

var str="Hello world!" 
document.write(str.substring(3)) 

结果：
lo world!

=========================================

举例：带两个参数的字符截取

var str="Hello world!" 
document.write(str.substring(3,7)) 

结果：
lo w

10.5.3 `slice()`

功能
- slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分
- start 为要抽取的片断的起始下标
  - 如果是负数，则该参数规定的是从字符串的尾部开始算起的位置
  - -1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推
- end 为要抽取的片段的结尾的下标
  - 若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串
  - 如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置
格式

stringObject.slice(start,end)

var str="Hello happy world!"
document.write(str.slice(6))

结果
happy world!

=====================================

var str="Hellohappyworld!"
document.write(str.slice(6,11))

结果
appyw

10.6 字符串的大小写

10.6.1 toLowerCase()

功能
- 用于把字符串转换为小写
格式

string.toLowerCase()

var str="Hello World!"
console.log(str.toLowerCase())

结果
hello world!

10.6.2 toUpperCase()

功能
- 用于把字符串转换为大写
格式

string.toUpperCase()

将字符串中的所有字符都换成小写或将字符串中所有字符都换成大写

var txt="Hello World!"; 
document.write(txt.toLowerCase() + "<br>"); 
document.write(txt.toUpperCase()); 

结果：
hello world!
HELLO WORLD!

10.7 字符串的内容查找

10.7.1 `match()`

功能
- match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
格式

string.match(regexp)

说明

match() 方法将检索字符串 String Object，找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志
如果regexp 没有标志 ，那 match() 方法就只能在 stringObject 中执行一次匹配
如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息
match 也是在目标字串对象中寻找与关键词匹配与否的一个方法，它的强大功能在于通过关键词的规则创建可以实现复杂搜寻功能，非常灵活
不建立规则前提下， match 可当作 search来使用，语法也一样，不同的是，它返回的是关键词自身（若匹配）和 null（若不匹配）这没有关系，如果只为了检测匹配。显然，这不是它存在于javascript 世界中的理由，它定有不同于 search 的特色，即通过规则创建完成实现通盘匹配

在 "Hello world!" 中进行不同的检索

var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))

结果
world
null
null
world!

===========================================================

使用全局匹配的正则表达式来检索字符串中的所有数字

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

结果
1,2,3

10.8 字符串的位置查找

10.8.1 `search()`

功能
- search() 方法用于检索字符串中指定的字符串，或检索与正则表达式相匹配的子字符串
- search 在一个字符串对象查找关键词（规范表达式，regular expression）
  - 若匹配则返回关键词在目标字串中第一次出现的位置序列，如不匹配，返回-1
  - search() 对大小写敏感
- search 方法只关心有无匹配，一旦找到匹配，就提供返回值，立刻中断查找的执行
- 当只需要验证有无匹配的操作时，用 search 既简单又高效
格式

stringObject.search(regexp)

检索 "W3School"

var str="Visit W3School!"
document.write(str.search(/W3School/))

结果
6

10.8.2 `indexOf()`

功能
- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1
- 其中 star 是可选参数，规定在字符串中开始检索的位置
  - 它的合法取值是 0 到 stringObject.length - 1
  - 如省略该参数，则将从字符串的首字符开始检索
- indexOf 是区分大小写
格式

string.indexOf(searchvalue,star)

在 "Hello world!" 字符串内进行不同的检索

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

结果
0
-1
6

10.8.3 `lastIndexOf()`

功能
- lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
- searchvalue 规定需检索的字符串值
- fromindex 规定在字符串中开始检索的位置
  - 它的合法取值是 0 到 stringObject.length - 1
  - 如省略该参数，则将从字符串的最后一个字符处开始检索
- lastIndexOf() 方法对大小写敏感
- 如果要检索的字符串值没有出现，则该方法返回 -1
格式

stringObject.lastIndexOf(searchvalue,fromindex)

var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))

结果
0
-1
6

10.9 字符串的替换

10.9.1 `replace()`

功能：
- replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
- 该方法不会改变原始字符串
- searchvalue: 规定子字符串或要替换的模式的 RegExp 对象
  - 如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象
- newvalue: 一个字符串值，规定了替换文本或生成替换文本的函数
  格式：

string.replace(searchvalue,newvalue)

var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))

结果
Visit W3School!

10.10 字符串练习

验证用户上传图片文件的格式类型，不是jpg格式时提示错误

function validJpg(inputFile){
    var fileName = inputFile.value //获取上传选中的文件名
    alert(fileName)
    //验证"C:\fakepath\jsServer.zip"，后缀名必须是jpg，否则不允许上传
    var index = fileName.lastIndexOf('.') // 获取.最后一次出现的位置
    var extName = fileName.substr(index+1)  //获取.以后所有的字符串
    if(extName.toUpperCase() == 'JPG'){ // 将字符串转换大写后比较判断
        alert('图片格式正确')
    }else{
        alert('图片格式错误')
        inputFile.value = null
    }
}

11. 日期对象

11.1 日期的使用场景

显示发布时间
在线时钟，日历
倒计时
定时器

11.2 基本概念

11.2.1 时区

时区（Time Zone）是地球上的区域使用同一个时间定义

11.2.2 时间戳

时间戳，一个能表示一份数据在某个特定时间之前已经存在的、完整的、可验证的数据
通常是一个字符序列，唯一地标识某一刻的时间

11.3 日期对象的定义与使用

11.3.1 new Date()

1. 创建一个日期对象
   objDate 是自定义的日期实例名称，后面是创建一个 Date 对象，Date 后面的括号里放参数

   var objDate=new Date([arguments list]);

=====================================================================================

2. 参数的形式主要有以下 3 种

   2.1 new Date("month dd yyyy hh:mm:ss");
	   hh:mm:ss 可选（不选的话就是默认的开始时间），而且前三项的顺序可随意，甚至各字段后面可以加逗号

   2.2 new Date(yyyy,mth,dd,hh,mm,ss);
       除了前两个字段（年、月字段）外，其余的都是可选的（不选的话就默认为开始的），不过，此处顺序最好别随意变换

   2.3 new Date(ms);
       参数表示的是需要创建的时间和 GMT 时间 1970 年 1 月 1 日之间相差的毫秒数

总结：各种函数的含义如下

函数	含义
month	用英文表示月份名称，从 January 到 December
mth	用整数表示月份，从 0（１月）到 11（1２月）
dd	表示一个月中的第几天，从 1 到 31
yyyy	四位数表示的年份
hh	小时数，从 0（午夜）到 23（晚 11 点）
mm	分钟数，从 0 到 59 的整数
ss	秒数，从 0 到 59 的整数
ms	毫秒数，为大于等于 0 的整数

注意
- JavaScript 的时间是调用用户系统的时间，记得先将系统时间调为正确的
- 如果需要标准时间，需要用服务器的时间

11.4 获取日期

11.4.1 `getFullYear()`

功能
- getFullYear() 方法可返回一个表示年份的 4 位数字，包括世纪值在内的完整年份，而不是两位数的缩写形式
- getFullYear() 方法以绝对数字的形式返回年份值
- getFullYear() 和 getYear() 区别就是前者不会出现浏览器兼容性问题，而后者会因浏览器不同出现不同的结果

var d = new Date(); 
document.write(d.getFullYear());

11.4.2 `getMonth()`

功能
- getMonth() 方法可返回表示月份的数字
- 是使用本地时间，而且返回值是 0（一月）到 11（十二月）之间的一个整数

var d = new Date(); 
document.write(d.getMonth());

11.4.3 `getDate()`

功能
- getDate() 方法可返回月份的某一天，返回对象所指的月份中的某一天，使用本地时间
- 返回值是 1 ~ 31 之间的一个整数
- 返回的结果由运行该程序的日期有关，只要是当前的号数就是正确的

var d = new Date() 
document.write(d.getDate())

11.4.4 `getHours()`

功能
- 返回 Date 对象的小时 (0 ~ 23)

var d = new Date(); 
var n = d.getHours(); 
document.write(n);

11.4.5 `getMinutes()`

功能
- 依据当地时间返回时间的分钟数

var d = new Date();
var n = d.getMinutes();

11.4.6 `getMilliseconds()`

功能
- 根据当地时间返回时间的毫秒

var d = new Date();
var n = d.getMilliseconds();

11.4.7 `getDay()`

功能
- getDay() 方法可返回表示星期的某一天的数字
- 返回值是 0（周日）到 6（周六） 之间的一个整数

var d=new Date(); 
document.write(d.getDay());

11.5 设置时间

11.5.1 `setFullYear`

功能
- setFullYear() 方法用于设置年份
- 参数 year 是必须有的，表示年份的四位整数，用本地时间表示

var d = new Date(); 
d.setFullYear(1992); 
document.write(d); 

结果为：
Sun Aug 16 1992 10:02:59 GMT+0800 (中国标准时间)

11.5.2 `setMonth()`

功能
- setMonth() 方法用于设置月份
- 参数 month 是必须的,表示月份数值，该值介于 0（一月） ~ 11（十二月） 之间

var d = new Date(); 
d.setMonth(0); 
document.write(d);

11.5.3 `setDate()`

功能
- setDate() 方法用于设置一个月的某一天
- 参数是必须有的，表示一个月中的一天的一个数值（1 ~ 31）

var d = new Date(); 
d.setDate(15); 
document.write(d);

11.5.4 `setHours()`

功能
- setHours() 方法用于设置指定的时间的小时字段
- 参数 hour 是必须的，表示小时的数值，介于 0（午夜）~ 23（晚上 11点） 之间，以本地时间为准

var d = new Date(); 
d.setHours(15); 
document.write(d);

11.5.5 `setMinutes()`

功能
- setMinutes() 方法用于设置指定时间的分钟字段，同样用于设置秒数与毫秒数
- 参数 min 是必须有的，它表示分钟的数值，介于 0 ~ 59 之间，以本地时间为准

var d = new Date(); 
d.setMinutes(17); 
document.write(d);

11.5.6. `setSeconds()`

功能
- setSeconds()方法用于设置指定时间的秒的字段
- 参数 sec 是必须的，它表示秒的数值，该值是介于 0 ~ 59 之间的整数

var d = new Date();
d.setSeconds(17);
document.write(d);

11.6 日期对象练习

11.6.1 计算时间差

计算当前时间距离武汉赏樱花的时间

var day = new Date();  // 当前标准时间

var Wuhan = new Date('2020-01-23 10:00:00');  // 武汉赏樱花时间

var daylength = (day - Wuhan) / 1000;  // 时间差（毫秒转秒）

var date = Math.floor(daylength / 3600 / 24);  // 天数

var hour = Math.floor(daylength / 3600) % 24; // 小时数

var min = Math.floor(daylength / 60) % 60; // 分钟数

var second = Math.floor(daylength % 60) // 秒数

alert(date + '天' + hour + '小时' + min + '分' + second + '秒')

12. arguments 对象

12.1 函数调用

函数的上下文对象 this
封装实参的对象 arguments

12.2 arguments 对象

arguments 对象实际上是所在函数的一个内置类数组对象
每个函数都有一个 arguments 属性，表示函数的实参集合
- 实参是重点，就是执行函数时实际传入的参数的集合
- arguments 不是数组而是一个对象，但它和数组很相似，所以通常称为类数组对象，以后看到类数组其实就表示 arguments
- arguments 对象不能显式的创建，只有在函数开始时才可用
arguments 还有属性callee，length 和迭代器 Symbol
- arguments.length 为函数实参个数，可以用 arguments[length] 显示调用参数
arguments 对象可以检测参数个数，模拟函数重载

12.3 arguments 对象实例

arguments对象：可以在函数内访问所有的参数，实参

function f1(){
	console.log(arguments[0]);
	console.log(arguments[1]);
	console.log(arguments[2]);
}

f1(12,23,45);   //12 34 45

在正常的模式下，arguments对象可以在运行的时候进行修改

function f2(a,b){
    arguments[0] = 10;
    arguments[1] = 20;
    return a + b;
}

console.log(f2(4,6));   //30

在严格的模式下，arguments对象在运行的时候不可以修改，修改arguments对象不会影响到实际的函数参数

function f3(a,b){
    'use strict';  // 'use strict' 是开启严格模式
    arguments[0] = 10;
    arguments[1] = 20;
    return a + b;
}

console.log(f3(3,6));   //9

通过arguments对象的length属性，可以判断实参的个数

function f4(){
    console.log(arguments.length);
}

f4(2,3,4,5);    //4
f4(1);      //1
f4();       //0

arguments是一个对象，不是数组，转换为数组可以采用 slice 和逐一填入新数组

var arr = Array.prototype.slice.call(arguments);
console.log(typeof arr);

var arr2 =  [];
for(var i = 0; i<arguments.length;i++){
    arr2.push(arguments[i]);
}
 console.log(typeof arr2);

arguments的callee属性可以返回对应的原函数，达到调用自身函数的效果，但是在严格模式中是不适用的

var f5 = function(){
    console.log(arguments.callee===f5);    //true
    console.log(arguments.callee===f6);    //false
}

var f6;
f5();  //返回原函数，调用自身

12.4 arguments 应用

arguments.callee为引用函数自身。我们可以借用arguments.length可以来查看实参和形参的个数是否一致

function add(a, b) { 

  var realLen = arguments.length; 
  console.log("realLen:", arguments.length); 
  var len = add.length; 
  console.log("len:", add.length); 

  if (realLen == len) { 
    console.log('实参和形参个数一致'); 
  } else { 
    console.log('实参和形参个数不一致'); 
  } 

}; 

add(11,22,33,44,66);

借用arguments.callee来让匿名函数实现递归

var sum = function(n) { 

   if(n == 1) { 
      return 1; 
   } else { 
     return n + arguments.callee(n-1); 
　  } 
  } 

console.log("sum =", sum(5));

编写一个函数求传入的若干个数字（不能用数组显示传入）的和

function add() { 

var len = arguments.length; 
var sum = 0; 

for (var i = 0; i < len; ++i) { 
    	sum += arguments[i]; 
} 
return sum; 
}; 

add(11,22,33,44,66);

13. JavaScript 事件

13.1 事件处理机制

13.1.1 什么是事件

事件是文档或者浏览器窗口中发生的一些特定交互方式
- JavaScript 创建动态页面，事件是可以被 JavaScript 侦测到的行为
- 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件
事件可以提高网页的交互性
事件可以是浏览器行为，也可以是用户行为
事件通常与函数一起使用，当事件发生时执行函数

13.1.2 事件处理机制模型

在这里插入图片描述

事件源对象
- 事件源对象是指与事件相关的页面文档以及元素对象
事件名
- 事件的名称，注意on前缀
事件处理程序
- 事件处理程序是指事件发生时执行的函数
- 采用具名或匿名函数

13.1.3 事件的绑定

行内绑定

<input type="button" value="行内绑定" onclick="clickMe()">

<script>   
function clickMe(){
    alert('我是行内绑定的事件')
}
</script>

动态绑定

<input type="button" value="动态绑定" id="btnBind">

<script>   
	var btn = document.getElementById('btnBind')   // 获取事件源
	// 绑定事件，给事件源对象的时间名指定一个处理程序，通常使用匿名函数方式
	// 同名事件会覆盖
	btn.onclick = function(){
	    alert('我是动态绑定的事件') // 被覆盖
	}
	
	btn.onclick = function(){
	    alert('我是动态绑定的后续事件')
	}
</script>

事件监听

<input type="button" value="事件监听" id="btnEventListener">

<script>
	//事件监听，同名事件会累加                         
	var btnEvent = document.getElementById('btnEventListener')
	btnEvent.addEventListener('click',function(){
	    alert('我是事件监听的事件！')
	})
	btnEvent.addEventListener('click',function(){
	    alert('我是事件监听的后续事件！')
	})
</script>

13.2 鼠标事件

鼠标事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄
oncontextmenu	在用户点击鼠标右键打开上下文菜单是触发
ondblick	当用户双击某个对象时调用事件句柄
onmousedown	鼠标按钮被按下
onmouseenter	当鼠标指针移动到元素上时触发
onmouseleave	鼠标指针移出元素是触发
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

13.2.1 鼠标点击事件

常用的鼠标点击事件
- onclick、onmousedown 和 onmouseup
执行顺序是 onmousedown->onmouseup->onclick
- 如果只是在元素上按了鼠标，但是不松开按键，onclick 和 onmouseup 都不会被触发

为一个 div 添加鼠标点击事件、鼠标按键按下事件、鼠标按键松开事件

<div class="box" id="box"></div>
<script>
	window.onload = function(){
		var box = document.getElementById('box');
		box.onmousedown = mousedown;
		box.onclick = click;
		box.onmouseup = mouseup;
		
		function mousedown(){
			this.innerHTML = this.innerHTML+"触发鼠标按下事件<br>"; 
		}
		function click(){ 
			this.innerHTML = this.innerHTML+"触发鼠标点击事件<br><br>";
		}
		function mouseup(){
			this.innerHTML = this.innerHTML+"触发鼠标松开事件<br>"; 
		}
	}	
</script>

13.2.2 鼠标移入移出事件

鼠标的移入移出事件
- mouseover 和 mouseout
这两个通常是连在一起使用的,可以通过该事件实现放大镜效果

通过鼠标移入、移出事件向元素中添加内容

<div class="box" id="box"></div>
<script>
	window.onload = function(){
		var box = document.getElementById('box');
		box.onmouseover = mouseover;
		box.onmouseout = mouseout;
		function mouseover(){
			this.innerHTML = this.innerHTML+"触发鼠标移入事件<br>"; 
		}
		function mouseout(){ 
			this.innerHTML = this.innerHTML+"触发鼠标移出事件<br><br>";
		}
	}
</script>

13.3 键盘事件

键盘事件
- onkeydown、onkeypress、onkeyup
- 这三个键盘事件的执行顺序是: onkeydown → onkeypress → onkeyup

属性	描述
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘事件松开

13.3.1 onkeydown 事件

在输入框中按下任意键，都会调用函数，函数内执行弹出警告框的代码

举例: 为一个输入框设定 onkeydown 事件

<input type="text" id="input" onkeydown="keydown()">

13.3.2 onkeypress 事件

onkeypress 事件只在按下键盘的任一“字符键”(如 A~Z、数字键)时触发，单独按下“功能键”(如 F1~F12、Ctrl 键、Shift 键、Alt 键等)不会触发

举例: 通过 onkeypress 事件弹出警告框

<input type="text" id="input" onkeypress="keypress()">

13.3.3 onkeyup 事件

在 JavaScript 中，onkeyup 事件是在键盘的某个键被按下之后松开的一瞬间触发的事件
- 用onkeyup提取value的话，可以提取到已经输入的内容
- 如果是onkeydown 和 onkeypress 都只会提取到按下按键之前的内容

举例: 通过 onkeyup 事件改变元素的内容

<input type="text" id="input" onkeyup="keyup()">

13.4 表单事件

表单事件

属性	描述
onblur	元素失去焦点是触发
onchange	该事件在表单元素的内容是触发(`<input>,<keygen>,<select>和 <textarea>`)
onfocus	元素获取焦点是触发
onfocusin	元素即将获取焦点是触发
onfocusout	元素即将失去焦点是触发
oninput	元素获取用户输入时触发
onresert	表单重置是触发
onsearch	用户向搜索域输入文本是触发(`<input="search">`)
onselect	用户选取文本时触发(`<input>和<textarea>`)
onsubmit	表单提交时触发

13.4.1 onchange 事件

功能
- onchange 事件会在域的内容改变时发生
- onchange 事件也可用于单选框与复选框改变后触发的事件
onchange 事件的触发步骤
- 当 input 获得焦点的时候，系统储存当前值
- 当 input 失去焦点的时候，判断当前值是否和之前的储存值相同，如果不同则触发 onchange 事件(非 IE 浏览器可以通过回车来判断)
- 如果只是输入内容，并没有按回车键或者离开输入框，onchange 不会触发

举例: 当输入框中的内容改变时，将输入的小写字母转换成大写字母

<form>输入需要转换的字符串
	<input type="text" id="input" onchange="func()">
</form> 
<p>当输入框失去焦点的时候，函数被触发，小写字母转换成大写字母</p> 
<script>
function func(){
    var x=document.getElementById("input");
    console.log(x.value);
    x.value=x.value.toUpperCase();
    console.log(x.value);
}
</script>

13.4.2 onsubmit 事件

功能
- onsubmit 属性只在 <form> 表单中使用
- onsubmit 事件是当表单提交时进行相关 js 操作的一个事件
- onsubmit 事件会在表单中的确认按钮被点击时发生
注意点
- 当该事件触发的函数中返回 false 时，表单就不会被提交
- 如果需要页面跳转的话，只需要将返回值改为 true 就可以了，当返回值是 false 时，表单不会被提交
语法

onsubmit="return 函数名()"

举例: 事件触发的函数返回 false，看页面会不会跳转

<form action="http://www.f-z.cn" onsubmit="return func()"> 
	<input type="text" >
	<input type="submit" value="提交">
</form>
<script>
function func() {
	alert("触发 onsubmit 事件");
    return false;
}
</script>

13.4.3 onfocus 事件和 onblur 事件

功能
- onfocus 事件在对象获得焦点时发生
- onblur 事件刚好相反，在对象失去焦点时发生
说明
- onblur 经常用于 Javascript 验证代码，一般用于表单输入框
- onfocus 通常用于 <input>, <select>, 和<a>

举例: 当输入框获得焦点的时候改变输入框的颜色，当输入框失去焦点的时候验 证内容是否为空，并把输入框的颜色改成白色

<form>
  <input id="input" type="text" onfocus="func(this)" onblur="check(this)">
</form>
<script>
function func(x) {
    x.style.backgroundColor ="yellow";
}
function check(x){
    x.style.backgroundColor ="#fff"
    if(x.value==""){
		alert("内容不能为空"); }
	}
</script>

13.5. 浏览器事件

13.5.1 onload 事件

功能
- onload 事件会在页面或图像加载完成后立即发生
- onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css 文件等)执行脚本代码

举例: 页面加载完成后弹出警告框

<body onload="func()">
<script>
	function func() {
		alert("页面加载完成"); 
	}
</script>
</body>

说明: 当 body 标签中的内容加载完成后调用函数名为 func 的函数

13.5.2 onresize 事件

功能
- onresize 事件会在窗口或框架被调整大小时发生
语法

window.onresize=function(){SomeJavaScriptCode};

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript

举例: 实现当浏览器被重置大小时执行 Javascript 代码

<head>
<meta charset="utf-8"> <title>分针网</title> 
<script>
	function myFunction(){
		var w=window.outerWidth;
		var h=window.outerHeight;
		var txt="窗口大小: 宽度=" + w + ", 高度=" + h; 		
		document.getElementById("demo").innerHTML=txt;
	}
</script>
</head>
<body onresize="myFunction()"> 
	<p>尝试调整浏览器的窗口</p>
	<p id="demo">&nbsp;</p>
	<p>注意:该例子在 IE8 或更早版本下可能不工作，IE8 或更早的版本不支持 window 对象的 outerWidth/outerHeight 属性</p>
</body>

解释: 当按住鼠标该表浏览器窗口大小的时候 js 代码宽度(w)跟高度(h)会自动改变