javascript基础（二）
17 事件处理
JS 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件。
17.1 事件绑定
事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。
以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：
JavaScript
我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序，如下例所示：
JavaScript
17.2 事件示例
一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。
onmouseover事件
onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件，示例代码如下：
JavaScript
请将鼠标移动至此处
onmouseout事件
onmouseout 事件会在鼠标从元素上离开时触发，示例代码如下：
JavaScript
onkeydown事件
onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件，示例代码如下：
JavaScript
onkeyup事件
onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件，示例代码如下：
JavaScript
18 作用域
在 JavaScript 中，您可以在任意位置声明变量，但不同的位置会影响变量的可用范围，这个范围称为作用域。作用域可以大致分为两种类型，分别是全局作用域和局部作用域。下面就来分别介绍一下。
18.1 全局作用域
全局作用域是指变量可以在当前脚本的任意位置访问，拥有全局作用域的变量也被称为“全局变量”，一般情况下拥有以下特征的变量具有全局作用域：
最外层的函数和在最外层函数外面定义的变量拥有全局作用域；
所有未定义直接赋值的变量拥有全局作用域；
所有 window 对象的属性拥有全局作用域，例如 window.name、window.location、window.top 等。
示例代码如下：
var str = "Hello World!";
function myFun(){
document.write(str); // 输出：Hello World!
}
myFun();
document.write(str); // 输出：Hello World!18.2 局部作用域
在函数内部声明的变量具有局部作用域，拥有局部作用域的变量也被称为“局部变量”，局部变量只能在其作用域中（函数内部）使用。示例代码如下：
function myFun(){
var str = "Hello World!";
document.write(str); // 输出：Hello World!
}
document.write(str); // 报错：str is not defined在函数内定义的局部变量只有在函数被调用时才会生成，当函数执行完毕后会被立即销毁。
19 JS定时器
JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。
在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。
JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：
方法 |
说明 |
setTimeout() |
在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次 |
setInterval() |
按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口 |
19.1 setTimeout()
JS setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。
JS setTimeout() 函数的语法格式如下：
setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);参数说明如下：
function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；
code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；
delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；
arg1、arg2、...、argN：要传递给函数的参数。
代码示例如下：
JavaScript
运行上面的代码，会间隔 500 毫秒，依次输出下面的内容：
Hello
JavaScript
定时器19.2 setInterval()
JS setInterval() 函数可以定义一个能够重复执行的定时器，每次执行需要等待指定的时间间隔。
JS setInterval() 函数的语法格式如下：
setInterval(function, delay, [arg1, arg2, ...]);
setInterval(code, delay);参数说明如下：
function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；
code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；
delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；
arg1、arg2、...、argN：要传递给函数的参数。
示例代码如下：
JavaScript
运行结果如下：
1 2 3 4 5 6 7 8 9
下午4:01:1319.3 JS取消定时器
当使用 setTimeout() 或 setInterval() 设置定时器时，这两个方法都会产生一个定时器的唯一 ID，ID 为一个正整数值，也被称为“定时器标识符”，通过这个 ID，我们可以清除 ID 所对应的定时器。
我们可以借助 clearTimeout() 或 clearInterval() 函数来分别清除由 setTimeout() 或 setInterval() 函数创建的定时器。调用 clearTimeout() 或 clearInterval() 函数需要提供定时器的唯一 ID 作为参数，示例代码如下：
JavaScript
当前时间为：
20 JS表单验证
表单是 Web 应用（网站）的重要组成部分，通过表单可以收集用户提交的信息，例如姓名、邮箱、电话等。由于用户在填写这些信息时，有可能出现一些错误，例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力，我们可以使用 JavaScript 在提交数据之前对数据进行检查，确认无误后再发送到服务器。
使用 JavaScript 来验证提交数据（客户端验证）比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快，而服务器端验证，需要先将数据提交到服务器，然后服务器再将结果返回给浏览器，用户需要等待服务器响应结果才能知道哪里出了问题。
表单验证通常由两个部分组成：
必填字段验证：确保必填的字段都被填写；
数据格式验证：确保所填内容的类型和格式是正确的、有效的。
20.1 必填字段验证
必填字段验证在用户注册时比较常见，通过必填字段验证，能够确保表单中的必填字段都被填写，例如用户名、密码、邮箱等。
示例代码如下：
JavaScript
20.2 数据格式验证
数据格式验证就是通过正则表达式来验证用户所填的数据，是否符合要求，以邮箱地址为例，正确的邮箱地址中要包含一个@和一个.，而且@不能是邮箱地址的第一个字符，.要出现在@之后。
示例代码如下：
JavaScript
21 动画效果的实现
JavaScript 动画主要是通过修改元素样式来实现的。
JavaScript 动画具有以下特点：
JS动画控制能力更强，能在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；
JS动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JS 动画才能完成；
CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。
JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：
JavaScript
下面再通过一个示例来演示如何创建 JavaScript 动画，示例代码如下：
JavaScript