JavaScript前端开发基础教程课件第4章

第四章：JavaScript交互目录表单媒体浏览器对象模型（BOM）CookieJavaScript实现简单动画效果表单简介HTML表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单表单定义

HTML表单是一个包含表单元素的区域，表单使用<form>标签创建。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend和label元素。注意，<form>元素是块级元素，其前后会产生折行。表单表单属性对于表单对象在DOM中除了常规的获取方法之外，有两种比较特殊和快捷的的获取方法：一种是直接通过其name属性名获取，而另一种是通过document.forms属性返回form对象数组来获取。表单表单元素表单元素的标签是<form>，表单元素可以在页面中出现多个，但是不允许嵌套。表单元素本身不包括任何内容，其内容需要靠子元素的填充来添加。表单元素除了HTML元素共有的属性之外还具有几个自身特有的属性表单表单样例样例介绍媒体HTML音频声音在HTML中可以以不同的方式播放。1.使用<embed>元素2.使用<object>元素3.使用HTML5<audio>元素媒体HTML视频1.使用<embed>标签2.使用<object>标签3.使用HTML5<video>元素4.最好的HTML视频解决方法5.视频网站解决方案6.使用超链接浏览器对象模型（BOM）BOM的全称是BrowserObjectModel（浏览器对象模型），既然叫做浏览器对象模型，那顾名思义是一种能够对浏览器内容进行访问和操作的工具。不同于DOM的是，BOM至今还没有一个正式的标准。使用BOM接口可以使HTML页面实现与浏览器之间的交互，同样地用户也可以通过HTML页面实现与浏览器之间的交互。浏览器对象模型（BOM）window对象简介window对象和document对象类似，都是全局对象，也是各自模型的顶层对象。在JavaScript中所有的全局对象和方法都是window对象的属性和方法，是凌驾于所有对象之上的最高层次的对象，而且window对象的所有方法和属性都可以不加window对象名直接调用，例如document就可以直接在JavaScript代码中使用。window对象还包括重要的几个子对象，也都是全局对象，可以不加window关键字直接使用。浏览器对象模型（BOM）screen对象screen对象代表了用户的显示器，一般在根据用户屏幕大小对页面进行适配时较为常用，screen对象没有方法，只有记录了用户屏幕信息的属性。浏览器对象模型（BOM）location对象location对象代表了页面的URL地址，能够获取当前页面的地址、文件的路径、服务器使用的端口，而且其一个很重要的功能是通过改变其地址使浏览器能够跳转到一个新的页面。浏览器对象模型（BOM）navigator对象navigator对象代表了用户的浏览器，其中包含了浏览器的名称、版本、用户、插件等信息。对于navigator对象的使用一般只是用其属性，因为navigator没有常用的方法。浏览器对象模型（BOM）网页弹窗我们平时浏览网页中，经常会遇到网页中的弹窗，其中有些时警告，有些时询问是否确认某项提交功能，有些则还包含了输入框。这些网页的弹窗都是由window对象的方法产生的，网页的弹窗对象一共包括三种：警告弹窗：使用window.alert("警告内容")调用，一般用于警告用户的某些操作，弹窗中只有一个确认按钮，单击后弹窗消失确认弹窗：使用window.confirm("确认内容")调用，一般用于在用户提交某项操作时提醒其是否确认提交提示弹窗：使用mpt("提示内容"[,"输入框占位值"])调用，一般在需要用户输入内容时使用，输入框占位符参数可以省略浏览器对象模型（BOM）窗口操作Window对象代表的就是浏览器窗口对象，因此其方法中包括了很多对于浏览器窗口的操作方法浏览器对象模型（BOM）计时事件有时候我们需要编写的代码在间隔一定的时间后才执行，例如在执行一系列特效时，两个特效之间要存在一个间隔的时间。JavaScript提供了一个能够延时执行代码的全局方法，这种方法被称为计时事件。JavaScript内置了两个计时事件的方法，分别是：setTimeout(回调函数,间隔时间)：经过间隔时间（毫秒）后只执行一次函数中代码setInterval(回调函数，间隔时间）：每经过间隔时间（毫秒）就执行一次函数中代码，无限循环“等待->执行->等待->执行”这一过程Cookie创建和获取Cookie使用document中的cookie属性就可以直接获取Cookie中的内容，其内容以字符串的形式保存在cookie属性中，其字符串格式如下：document.cookie="name=value;[expires=date];[path=path];[domain=domain];[secure]";Cookie使用Cookie储存多条信息在上一节中，我们介绍了Cookie的创建和读取，按上节中提供的方法，如果需要保存多条数据就要创建多个Cookie，但是需要注意的时，每个域最多只能创建20个Cookie，而且浏览器最多只能保存300个Cookie，因此当需要保存的内容较多时，创建多个Cookie的方法并不可取。 当遇到需要在Cookie中储存多条数据时，例如需要同时储存用户名和密码时，可以创建一个包含多个内容的Cookie，使用“&”符号分割储存多条信息。但是需要注意的是，每个Cookie的最大尺寸是4K，保存的数据量不能超过这个值，其写法如下：document.cookie="名称=值1&名称=值2……&名称n=值n";Cookie删除Cookie如果需要删除Cookie，利用其过超过有效期自动删除的特性，只要设置其有效期在当前时间之前就可以删除掉CookieJavaScript实现简单动画样例既然JavaScript能够操作HTML中的元素，那么如果对某个元素在短时间内进行一系列如放缩大小、移动位置等操作，则就会令其看起来似乎像动画一样。就如同我们看的视频一样，视频实际上也是又许多图片在很短的时间内不断切换，当切换的速度超过人眼能够识别的速度时，我们在