网页客户端脚本.ppt

1、Part II 客户端脚本与网页动态效果,1. 在网页中使用客户端脚本2. JavaScript编程基础3. JavaScript内置对象4. JavaScript内置对象的应用5. 浏览器对象及其应用6. 客户端脚本高级应用,JavaScript是一种基于对象和事件驱动的客户端脚本语言。 在线测试,理论：10 上机：4,实验一：JavaScript内置对象及其应用 实验二：浏览器对象及其应用 实验报告二：客户端脚本及其应用,学习目标,理解客户端脚本的作用；掌握在网页中使用客户端脚本的方法；掌握JavaScript语言的基本语法；掌握JavaScript内置对象的作用；掌握浏览器对象在脚本编程

2、中的作用；理解DHTML的原理，能够在网页中应用DHTML特效。,引言：交换图像；滚动控制（停止/继续滚动）；弹出式菜单产生的代码；控制页面背景音乐（播放/静音），需要定义页面元素（对象）当某个事件发生时所执行的代码。 实时显示系统时间，需要使用JavaScript（以后简称为JS ）内置的相关对象及其方法。,Part II(1) 在网页中使用脚本,对象的PEM模型 对象的两个要素与常用事件 浏览器支持的两个重要对象及方法什么是脚本？什么是脚本语言？客户端脚本的作用DHTML技术客户端脚本的三种使用方法脚本的运行与调试函数定义 在JS脚本中输出HTML标记一个综合实例单元练习题,实验五,对象的

3、PEM模型,HTML文档中的每个元素都是一个拥有属性（Property）、事件（Event）和方法（Method）的对象，称为文档对象。页面中的任何对象都有它的属性。在使用HTML标记定义时，通过设置其属性以控制对象的外观等；事件是能被对象识别的动作，事件可以由用户操作、程序代码或系统行为来触发。为增强页面的交互能力，可以定义对象的事件。例如，设置按钮实现对页面背景音乐的播放或停止控制，就要定义按钮的单击事件。当触发一个对象的某个事件时，该对象能够按照某种方式做出响应，但具体的响应过程需要用户编写脚本代码来实现，这种过程称为事件过程，对事件响应的代码称为事件代码，事件代码的总称称为方法。,属性

4、（数据）方法（动作）,使用HTML标记定义对象（页面元素）时，不仅可以定义其属性，还可以定义其事件，以增强交互能力；在脚本中访问对象属性的方法：对象名.属性； 注意：对象分级。例如：要访问页面中表单内的某个文本框，就需要在文本框名再前缀“表单名.”。在脚本中使用对象提供的方法：对象名.方法名(),对象的两个要素,Return,6/26,事件,常用的鼠标事件：OnClick：鼠标单击时发生；OnChange：元素的值发生改变时触发；OnFocus：获得焦点（激活对象）时触发；OnBlur：元素失去来自鼠标或键盘焦点时触发。,其它事件：OnLoad：浏览器完成HTML文档载入时触发；OnUnLoa

5、d：浏览器卸载HTML文档时触发。,说明：body代表文档的主体部分， OnLoad事件通常的用法是：,Return,特殊对象: window,是JS支持的对象，代表浏览器的窗口；向页面输出警告信息的方法：alert()接收用户输入的信息：prompt()方法 格式：变量名=prompt(“提示信息”); JS用法：window.alert(表达式); 或 alert(表达式);,浏览器支持的两个重要对象及方法,说明：在使用alert()或prompt()方法可以省略window，是因为window对象是浏览器的顶级对象，后面还将介绍浏览器对象模型中其它对象的用法。,Return,特殊对象:

6、document,是JS支持的对象，代表浏览器窗口中的页面文档；向页面输出信息的方法：write() JS用法：document.write(表达式);,浏览器支持的两个重要对象及方法,说明：因为document对象是浏览器的二级对象，所以前缀“document.”不能省略。Document对象的两个常用事件onload和onunload，分别在文档装载完毕和卸载（或从当前页面跳转到其它页）完毕时触发。,Return,在JS脚本中输出HTML标记,在JavaScript脚本语言中还可以通过document.write()方法输出HTML代码（即把HTML标记作为特殊的文本输出），它与在部分使用

7、期HTML标记产生页面元素效果相同。但后者更加灵活，这种HTML代码和JS代码的混合编程方式能实现页面的交互效果和动态效果。,JS脚本代码： document.write(“”); 与HTML代码： 等效。,说明：在JS脚本中，把HTML标记作为特殊的字符串处理，其中的一对双引号必须要有。在脚本中能输出HTML标记，使得制作动态表格、动态链接成为可能。,Return,交换图像：对象的属性访问,说明：本方法比使用DW做简明些（代码少！）,定义对象（页面元素）的同时定义了该对象的事件和方法；OnMouse和OnMouseout是浏览器支持的事件；对象命名可以用name或id属性；This表示本图像

8、对象；This.src是对本对象属性的访问，其属性值必须加上一对单引号（整个事件的定义使用一对双引号）。,Return,背景音乐控制对象属性访问,定义按钮的单击事件OnClick；定义特殊的对象，只能使用id属性进行标识，相当于name属性；属性volume表示对象的音量。, ,Return,滚动控制：对象的方法,OnMouse和OnMouseout是浏览器支持的事件；This表示本滚动对象；Stop()和Start()是方法。,对象,Return,什么是脚本和脚本语言？,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。,Return,客户端脚本中可访问的两类对象：JavaSc

9、ript内置对象；浏览器对象。,脚本可分为服务器端脚本和客户端脚本两类：服务器端脚本：指代码只能在服务端执行。例如 ASP、JSP、PHP等；客户端脚本：其代码由客户端的浏览器解释执行。例如JavaScript、VBScript等。,脚本语言用来编写脚本命令的语言。脚本语言一般是文本形式，都有相应的脚本引擎（解释器）来解释执行，不需要编译。,JavaScript是客户端浏览器默认使用的脚本引擎,JavaScript脚本中的注释方法：在命令行尾加上双斜杠（如同VC+），即 /注释内容,动态HTML：即Dynamic HTML，建立在如下三个方面之上：HTMLCSS客户端脚本,Return,客户端

10、脚本的作用,脚本代码嵌入到HTML文档中用来实现HTML语言不能完成或难以完成的功能，如进一步增强网页的交互性，通过和操作浏览器对象控制浏览器外观、状态和运行方式等。客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据等；实现页面元素的特殊显示效果，如图片的循环显示、图片渐变等。总之，使用客户端脚本能实现页面的动态效果。,Return,在HTML页面中使用客户端脚本,脚本代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载，执行时不进行编译，由浏览器解释执行。内部脚本代码可通过标记引入到HTML文档的任何地方，但一般都是将所有的脚本代码集中放在部分，脚本代码以开始，以结束，并

11、通过Language属性定义脚本代码所用的脚本语言。 格式如下： ,注意：HTML标记对英文字母大小写不敏感，而JS脚本代码则不然。,Return,在DW中浏览含有脚本的网页时可能出现的安全提示：,说明：在本机上浏览包含有客户端脚本的网页，一般会出现上述信息。其实，这与浏览器的安全设置有关。,查看脚本运行时的错误信息,双击,Return,JavaScript函数,function fn(p1,p2,) /函数定义，fn为函数名 s1; s2; ,说明：function是脚本引擎的保留字；Si是脚本引擎能够执行的命令；J使用标记定义的脚本中，函数之内代码的执行次数由该函数的被调用次数决定，而函数

12、之外的代码在页面加载时只执行一次。,函数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。函数通常用于响应事件，即作为事件的处理方法。,Return,使用客户端脚本方式1:内联式脚本,直接将响应事件的代码放置事件名称后，这样的脚本称为内联式脚本。如前面交换图像。又如：,说明：本用法与内联样式用法相似；顶级对象Window的alert()方法，前缀“window.”可省略；使用JavaScript脚本时，可以省略javascript:；如果脚本中有多条命令，则用分号分隔。,Return,使用客户端脚本方式2：内部脚本,用和标记符嵌入脚本程序，一般置于文档的头部。例如： 此处为程序代码,默

13、认，可省,说明：本用法类似于内部样式用法；方式(一)都可以用方式改写。,交换图像的内部脚本写法, 内部脚本用法 /* 以下定义了两个函数事件处理方法*/ function jh1() /函数定义 tx.src=jpg/tp2.jpg; function jh2() tx.src=jpg/tp1.jpg;/访问页面元素的属性 ,Return,使用客户端脚本方式3*-链接脚本文件*,Return,说明：本用法与样式文件的用法相似；使用行为面板制作弹出式菜单时会生成一个.js文件；总之，脚本的三种使用方法与样式的三种用法相对应。,使用标记的src属性指定一个外部javascirpt文件（后缀为.js

14、 ）例如：, ,综合实例,实验五,Return,单元练习,2. 属性和_被称为对象的两个要素。,3. alert()方法是_对象提供的方法。 A. document B. Math C. Array D. window E. history,4. JavaScript中定义函数的关键字是_。 A. style B. function C. Language D. Script,5. JavaScript函数定义应置于_标记内。 A. html B. head C. style D. script,1. 脚本可分为服务器端脚本和_脚本两大类。,6. JavaScript脚本中函数之内的代码的执行

15、次数由该函数的被调用次数决定，而函数之外的代码在页面加载时只执行一次。,7. 用户浏览网页时，可以获得该文档里的客户端代码。,Return,8. 客户端脚本位于成对标记_内。 A. B. C. D. ,Part II(2) JavaScript编程基础,常量与变量运算符与表达式语句及其分类分支语句循环语句书写格式与注释方法单元练习,变量是存放信息的容器，用于数据的存取(读/写)；可用var定义，格式为： var 变量名； 说明： (1) 变量命名应尽量做到见名思义; (2) 变量也可不定义而直接使用。JS变量不需要指定类型，这不同于其它的程序设计语言，因此，JS的变量是弱类型；常量主要有两种：

16、字符型和数值型。使用时，字符型要加一对双引号或一对单引号，而数值型按通常的方式直接使用。,变量与常量,Return,运算符、表达式,JS运算符是完成某种操作的符号，与Java、C等程序设计语言非常相似，主要有：算术运算符：+、*、/、+（自增1）、%（取余数）等（复合）赋值运算符：=（赋值）、+=、*=等复合赋值关系运算符：、=、!=、=（相等）等逻辑运算符：&（与）、|（或）、!（非）字符串运算符：+（字符串连接）其它运算符：如new（创建动态对象的一个实例）等,表达式是操作数与运算符的组合，即用运算符连接常量、变量的式子。表达式可分为数值表达式和条件表达式，条件表达式通常由关系运算符和逻辑

17、运算符构造，其值为逻辑值，即真（true）与假（false）。,Return,语句及其分类,语句是构成程序的基本单元，可分为说明语句和可执行语句。除了顺序结构外，还有分支和循环两种结构。说明语句：如变量说明等可执行语句：对数据的处理和程序流程的控制,可执行语句又可分为：表达式语句：在表达式末尾加上一个分号分支语句：ifelse、switch循环语句：for等转移（控制）语句：break、continue等,Return,如果一行写多个语句，则应使用分号分隔，否则可以省略分号。单行注释方法：行尾加双斜杠格式： JS代码行 /注释文本多行注释方法可出现在标记内的任何位置格式：/*注释文字*/,书写

18、格式与注释方法,Return,分支语句：if语句,if(条件表达式) 语句序列;,if(条件表达式) 语句序列; else /表示反之 语句序列; ,说明：若语句系列只有一条语句，则一对花括号可以省略。if语句实现了选择操作。简单条件与复合条件。用后继语句解释程序的执行过程。,计算测验题文本框接收输入文本框更新后事件的处理方法在脚本里处理信息,分支示例,Return,开关语句：switch语句,switch(表达式) case 值1:语句序列;break;case 值2:语句序列;break;default:语句序列; ,用途：对一个表达式进行多次判断，实现多种选择。,说明：当表达式的值与某个

19、值相等后，就执行且只相应的语句序列；break语句表示中止开关语句的执行。,循环语句：for循环,for(初值;条件;增量)语句序列;,赋初值只进行一次，然后进行条件判定；若条件成立，则进入循环体；循环体内语句执行后，执行增量，再进行条件判断。若条件仍成立，则又进入循环体，执行体内的语句，执行完毕后，又执行增量；若条件不成立，则终止循环。执行循环语句的后继语句。,说明：若循环体只有一条语句，则一对花括号可以省略。Break语句也可以用于循环体内，表示终止循环,for循环用法示例,Return,单元练习,1. 脚本代码由客户端浏览器解释执行的脚本称为_脚本。,2. 脚本里一行上可以写多条语句，其

20、间以_分隔。,5. JaScript中，“=”表示赋值运算，而_表示相等关系运算。,5. Break语句只能用于循环语句里。X,4. 表达式只能出现在赋值运算符的右边。,6. 程序的三种结构分别是顺序、_和循环。,Return,3. JavaScript脚本中的变量在使用前必须使用关键字 var 申明。 X,Part II(3) JavaScript内置对象,日期/时间对象Date数组对象Array字符串String数学对象Math单元练习,JavaScript提供了几个实用的对象（三个动态对象与一个静态对象），这些对象都有各自的属性，在脚本中可以访问；也有已经封装好了的方法供编写脚本时使用。

21、动态对象在使用前需要使用new运算为其创建实例；静态对象不需要创建实例，而是直接使用。,日期对象 Date,var 对象名=new Date();例如：var rqsj=new Date();,一、用法格式,二、功能与方法,借助于如下的方法，获取实例（客户端）当前的日期和时间：,说明：方括号表示可以省略；关键词Date中的字母D必须大写，其它小写；new是JS的运算符，用于创建动态对象的一个实例，必须小写；Date后一对圆括号必须写。,说明：日期对象也提供了获得“时分秒”的方法；关键字var可以省略，即是将对象的属性作为一个普通的变量处理；运算符new用于创建动态对象的实例，不可省略，必须小写

22、。,getHours()：小时，取值为0-23getMinutes()：分钟，取值为0-59getSeconds()：秒，取值为0-59getYear()：年份getMonth()：月份，取值0-11，0代表1月份，getDate()：天，取值1-31getDay()：星期，取值0-6，0代表星期天,日期/时间对象的常用方法,数组对象的定义方法：var myArray=new Array(正整数);,数组对象：Array,数组对象用于编程中最常见的一种数据结构，相当于定义了一组相关的变量，存放这些相关的数据。数组对象的特点是便于循环处理，其循环变量为数组的下标。,说明：方括号表示可以省略，对象

23、名myArray的命名较随意；new是JS的运算符，用于创建动态对象的一个实例，必须小写；关键词Array中的字母A必须大写，其它小写；一对圆括号内的正整数表示该数组元素的个数，也就是myArray.length属性的值；数组下标表示数组元素在数组中的位置，其值小于数组长度，从0开始编号。,数组元素的使用方法： myArrayi;,42/26,表单元素除了可以“按名引用”外 ；还有另一种方法： elementsi i=0,1,2即使用了特殊的elements数组表示表单内的元素，其中下标为表单内元素出现的先后顺序。 设计在线考试系统时，通常将考生要提交的数据置于一表单内的各种容器（即表单元素）

24、里。使用elements数组表示方法，方便了使用循环结构访问表单元素，从而方便处理表单中的数据。,表单元素数组,Return,字符串对象String,字符串变量与字符串对象在使用时没有太大的区别，字符串变量也可使用字符串对象的属性和方法。,方法：常用于考试系统、情报检索系统等的设计中indexOf() ：格式：strObj.indexOf(subString, startIndex)功能：返回子字符串在字符串对象（或变量）中的起始位置。如果不存在，则返回-1。 参数startIndex表示在 String 对象内开始查找，如果省略，则从字符串的开始处查找。例如：str=“abcdefghxey

25、e”，则 str.indexOf(“e”)返回4 ，str.indexOf(“e”,6)返回9 str.indexOf(“c”,6)返回-1.,length属性:它表明该字符串中的字符个数(一个汉字按一个字符计)。,定义： var myStr=new String(“一串字符”);,44/26,注意：字符串处理函数中的位置序号从0开始编号。,例如：s=“How are you?”，则s.SubStr(4,3)返回are,SubString(m,n)：返回从第m位至第n位之间的n-m个字符。注意：返回字符中包括第m位但不包括第n位的字符。,Return,SubStr(m,n)：返回从第m位开始的

26、前n个字符。,例如：s=“How are you?”，则s.SubString(4,6)返回ars.SubString(4)返回are you?,数学对象Math为JavaScript的内置静态对象，可直接访问其属性和使用其方法，即不需要使用new运算符创建实例。,数学对象 Math,Return,属性：PI圆周率常数，即3.1415926；E欧拉常数，约为2.718,方法：abs(num)返回参数的绝对值；cos(num)返回参数num的余弦值；random()返回一个01之间的随机数；round(num)将参数num四舍五入后返回其整数,例如：设计纸牌游戏时，需要产生1至52之间的随机整数

27、，可使用表达式： Math.round(Math.random()*51)+1;,JS内置对象应用示例下拉列表点歌,Return,单元练习,5. 可以从日期对象获得星期的方法是_。 A. getYear() B. getMonth() C. getDate() D. getDay(),4. JavaScript内置的对象中，不是动态对象的是_。 A. Array对象 B. Date对象 C. String D. Math,2. JavaScript内置的_对象在使用前必须使用new运算符为其创建实例。,1. JavaScript内置的对象可分为动态对象和_对象两大类。,3. 使用JS内置对象时

28、，其字母大小写必须严格书写。,48/26,9. s=new String(“How are you?”)，则s.SubString(4,6)返回是_ 。 A. are B. are yo C. are you D. ar,Return,8. Array对象的长度属性是_ 。 A. height B. width C. length D. long,6. 设已命名某个下拉列表为list，则在客户端脚本中判断第k个列表项被选择的表达式为_ A. list(k).selected B. list.options(k)selected C. list.optionsk.selected D. list

29、.optionk.selected,7. 具有Length属性的对象是_ 。 A. Array B. Math C. Date D. String E. 都不具有,Part II(4) JS内置对象的应用,根据进入页面的时间显示相应的问候信息下拉列表点歌浏览一组图片在线测试单元练习,在JS脚本中，可以访问对象的属性，也可使用对象封装了的方法。,实验六,50/26,例 根据进入页面的时间显示相应的问候信息，并输出系统的日期/时间和星期。 实验6,Return,例 背景音乐播放下拉列表点歌,实验6,Return,52/26,例 在浏览器的正中央显示一幅图片，然后定义两个按钮（向后、向前）以实现对一

30、组图片的浏览。,Return,设计说明：在窗口正中央显示一幅图片 （参见实验三）图片下文定义两个按钮；表格布局。,例 在线测试,表单元素除了可以“按名引用”外 ；还有另一种方法： 表单名. elementsi i=0,1,2 其中i为表单元素出现的序号（从0开始编号）。即使用了特殊的elements数组表示表单内的元素。,在线测试的三种题型：判断、选择和多选。其中判断和选择分别为二选一和四选一，可使用Radio类型的按钮实现（单选）；每一个多选题通常对应五个Checkbox类型的复选框（复选）。,考生答案分别用pdda、dxda和mda三个变量保存，它们在考生提交后用脚本代码处理生成。,分别将

31、pdda、dxda和mda与标准答案字符串比较，即可评分、判断每题的正确与否，最后以表格形式对照输出。,思考：多选题设计时不必使用name或id属性，而单选(包括判定)则必须使用。,说明：为方便对照，题目连续编号（从1开始）。,55/26,Return,评分结果,1. 若在JavaScript定义了10首歌曲的URL，数组名为songs，则引用第10歌曲，应使用_。 A. url10 B. songs10 C. songs9 D. url9,Return,单元练习,2. 在JavaScript里 ，字符串中字符的位置、数组元素的下标都是从0开始编号的。,3. 在JavaScript里 ，日期对

32、象的getMonth()方法的取值范围是1-12。 X,4. 在JavaScript中，表单中的某个文本框，除了可以按文本框名称访问外，还可以使用_数组。 A. text B. form C. elements D. input,Part II(5) 浏览器对象的使用,浏览器对象模型Window对象的属性和方法几个重要的二级对象客户端的Cookies信息*应用实例单元练习,为了实现页面的动态效果和交互效果，除了使用JavaSript内置对象外，经常还需要使用浏览器对象。浏览器对象都有各自的属性和方法。例如，Window对象是浏览器的顶级对象，它提供的定时器方法在制作页面的动态效果就经常用到。,

33、实验七,实时显示系统时间(时-分-秒)循环显示一组图片动态链接,Return,DOM 是Document Object Model的缩写，译作“文档对象模型”，是W3C日前极力推广的web技术标准之一，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events),文档对象模型(DOM)用来表示Web浏览器信息以及HTML元素的一个模型，它使脚本可以访问Web页上的信息。,文档对象模型DOM,59/26,文档对象模型示意图,Window对象,属性Document:窗口中显示的HTML文档；History:访问过的URL；Location:

34、包含有当前URL的信息；Navigator:包含有浏览器的信息。说明：上述属性也是对象，称为Window对象的二级对象。,Window对象表示浏览器的窗口，它是浏览器对象模型中最顶层的对象。它具有的属性和方法如下：,一、定时器方法 定时器方法又分以下两种：1. setInterval() 方法 格式： setInterval(mn(),mm); 第一参数mn()为使用的方法（通常是用户自定义且在标记内由function定义），第二参数mm是时刻，以毫秒为单位 功能：指每隔mm毫秒后采用该方法。,Window对象的方法,Return,注意：上述两种方法与以前一样，在使用时不必前缀“window.

35、”，并且这些方法对字母大小写是敏感的。,除了前面介绍过的alert()、prompt()方法外，还有：,2. setTimeout() 方法 格式： setTimeout(mn(),mn); 两个参数的含义与上面方法相同， 差别是经过mm毫秒后使用该方法（只一次，不是周期性地触发）。 。,62/26,open()：打开一个已经存在的窗口，或者创建一个新窗口，并在该窗口中加载一个文档。Navigate：在当前窗口中显示新文档。Close：关闭窗口。,Return,对象的引用,根据对象的包含关系，使用成员引用操作符一层一层地引用对象例如：window.location较低层次对象一般用名称（对应于

36、id属性或name属性）引用例如：document.form1.test,三个重要的二级对象,Document History Location,Document、History和Location分别称为浏览器的文档对象、历史对象和位置对象，同时也是顶级对象Window的属性。,Return,说明：在脚本中访问上述浏览器对象时，其对象名称必须小写！,Document对象,作用: 指当前窗口或某个框架中显示的HTML文档，通过该对象可以访问网页中的所以对象，从而实现与这些对象的交互。,属性location: 当前文档的URL；title：文档的标题；filesize：文档大小；all, bgco

37、lor, forms, *document.cookie事件onload, onunload方法 1. write()：向浏览器写入HTML标记或直接输出给定的数据。JS用法：window.document.write() 或 document.write()说明：在document前的“window.”可省略,Return,2. close()：关闭文档。,Location对象,作用: HTML文档的URL信息。,属性href: 返回或设置当前文档的URL JS用法：window.location.href =“文档的url” 或 location.href =“文档的url”说明：在doc

38、ument前的“window.”可省略；文档的url必须使用一对双引号(或者一对单引号)；当出现在赋值语句中时，则实现了页面跳转（链接）；location.href属性与document.location属性作用相同，差别是后者不能改变。,Return,History对象,作用: 是浏览器已经访问过的网页的URL集合。,属性length: 历史记录中URL的数目。方法 1. back()：载入历史列表中的上一个文档，即实现浏览器窗口中“后退”按钮的功能； 2. forward()：载入历史列表中的下一个文档，即实现浏览器窗口中“前进”按钮的功能； 3. go()：载入历史列表中的一个指定文档。

39、,Return,说明：history.back()相当于history.go(-1);history.forward()相当于history.go(1);,68/26,Navigator对象,作用: 客户端浏览器的相关信息。,属性AppName: 浏览器名称。AppVersion：浏览器版本。AppCodeName：浏览器的代码名。UserAgent：浏览器的用户代码。,Return,客户端的Cookies信息*,Cookie是浏览器在客户端硬盘上为访问网站开辟的一小块硬盘空间，Web服务器通常在这块区域上记录一些与用户相关的信息，如浏览者的个人信息、访问站点的次数和时间等。,使用浏览器访问时

40、，Cookie信息被保存在C:Documents and Settings用户名Cookies中，并且每个cookie是一个被加密了txt文件，文件名是以“用户名网站URL”命名的。例如，管理员用户上网时的Cookie信息存放在如下的文件夹里：C:Documents and SettingsAdministratorCookies,第一方Cookies，指的是来自当前正在访问的网站，储存了一定信息的Cookies 第三方Cookies，指的是来自当前访问网站以外的站点，最常见的就是那些在被访问站点放置广告的第三方站点，这第三方站点可能正在使用Cookies,设置浏览器是否允许使用Cookie信

41、息,打开IE浏览器的属性窗口，选择“隐私”选项，即可设置Cookie.,1.设置cookie：每个cookie都是一个名/值对，设置方法如下： document.cookie=“userId=828”;如果要一次存储多个名/值对，可以使用分号加空格隔开。例如：document.cookie=userId=828; userName=hulk; 2.获取cookie的值 var strCookie=document.cookie;这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。,Cookie信息处理,(1) 只能够一次获取所有的cookie值，而不能

42、指定cookie 名称来获得指定的值，用户必须自己分析这个字符串来获取指定的cookie值。 (2) 在document.cookie中，cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值。例如连续执行下面两条语句： document.cookie=“userId=828”; document.cookie=“userName=hulk”;这时浏览器将维护两个cookie，分别是userId和userName,Cookie使用的注意事项,Return,实时显示系统时间(时-分-秒),设计要点：使用日期对象的“时分秒”方法；定义Body对象

43、的OnLoad事件（）： 事件代码位于函数xssj()内；Window对象的定时器方法。,Return,页面设计效果如下：,74/26,Window对象的setTimeout()定时器方法function xssj() var theDate=new Date() xsk.value=theDate.getHours(); fzk.value=theDate.getMinutes(); miaok.value=theDate.getSeconds(); setTimeout(xssj(),1000); / 函数自己调用自己,实现了无限循环 body font-size: 36px;color:

44、 #CC3333; .ys font-size: 24px;color: #0000CC; 现在时刻： 时分 秒,实时显示时间（时分秒）,Return,自动循环显示一组图片,图片定时自动循环翻转var tp=new Array(4); /定义共有4张图片的数组对象tp0=jpg/apples.jpg;tp1=jpg/girl1.jpg;tp2=jpg/girl2.jpg; tp3=jpg/裴涩琪2.jpg;j=0; /变量j用于计数setInterval(disp_img(),1500); /定时器function disp_img() txk.src=tpj; j+; /下一幅 if(j=t

45、p.length) j=0; /从头开始,数组对象tp,Return,Sj07-4.html历史对象History之back()方法的使用请注意当前页面上的内容.链接到其它页面后还会返回本页面!,Sj07-4a.html历史对象History之back()方法的使用 alert(当前是被链接页面，点击确定后将返回主调页面!); history.back(); /第一个字母不能大写! / location.href=sj05-6.html /与上面方法等效 / history.go(-1); / 与上面方法等效,历史对象History之back()方法的使用,Return,利用Location对象做动态链接,