Web编程JavaScript部分.ppt

《Web编程JavaScript部分.ppt》由会员分享，可在线阅读，更多相关《Web编程JavaScript部分.ppt（131页珍藏版）》请在三一办公上搜索。

1、Web技术应用基础,第六章 脚本语言-JavaScript,2023/11/8,2,6.1 脚本语言概述,什么是脚本语言?嵌入在网页文件中的一种具有程序逻辑的语言如何执行脚本语言？脚本语言由集成在浏览器中的脚本引擎来解释执行。什么时候执行脚本语言？当浏览器打开一个HTML文档时，会从头到尾逐句解释整个文档中的HTML标签和脚本代码块，如果脚本代码块中有可以执行的语句，浏览器会在读取到该语句时立即解释执行。,2023/11/8,3,6.2 JavaScript概述,6.2.1 JavaScript的起源JavaScript是Netscape公司与Sun公司合作开发的，在JavaScript出现之

2、前，浏览器只是一种能够显示超文本文档的软件的基本部分，而在JavaScript出现之后，他们的交互性得到了很大的改善。JavaScript第一个版本-JavaScript1.0出现在1995年推出的Netscape Navigator2浏览器中。微软在推出IE3.0时发布了VBScript并以Jscript为名发布了JavaScript的一个版本。,2023/11/8,4,6.2 JavaScript概述,6.2.1 JavaScript的起源面对微软公司的竞争，Netscape与Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化，结果就是ECMAScript

3、语言。Jscript，JavaScript，ECMAScript实际上是一种语言，但是JavaScript和Java没有任何联系。,2023/11/8,5,6.2 JavaScript概述,6.2.2 JavaScript运行机制JavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它既可以在客户端运行也可以在服务器上运行。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。,2023

4、/11/8,6,6.2 JavaScript概述,6.2.3 JavaScript的特点 1.JavaScript是一种脚本语言2.基于对象3.事件驱动4.动态5.安全6.与平台无关,2023/11/8,7,6.2 JavaScript概述,6.2.4 JavaScript应用案例图像互换位置 1.任务要求：单击时交换图象2.代码示例：例ex6-01.html,2023/11/8,8,6.3 JavaScript基本语法,脚本代码的位置 1.JavaScript嵌入HTML文件 应用HTML的标记加入JavaScript代码。语法：JavaScript代码可以包含在或标记内，但包含在内的Jav

5、aScript脚本在页面装载前运行，所以，函数一般包含在标记内。,2023/11/8,9,6.3 JavaScript基本语法,脚本代码的位置2.将脚本程序代码放置在一个单独文件中将JavaScript代码以扩展名“.js”为单独存放，再用标记的“src”属性把该代码调入文档。语法：Javascript.html,2023/11/8,10,6.3 JavaScript基本语法,脚本代码的位置3.将脚本程序代码作为属性值 如：hello,2023/11/8,11,6.2 JavaScript基本语法,6.2.2 JavaScript书写格式1、区分大小写2、用换行符作为一行的终止符3、如需要把几

6、行代码写在一行中要用“;”分开。4、注释：一行/或多行/*/。,2023/11/8,12,6.2 JavaScript基本语法,基本数据类型 1.数据类型：数值型：整数和浮点数。字符型：用 或 括起来的一连串字符或数字。布尔型：true和false。空值：null。2.常量,2023/11/8,13,6.2 JavaScript基本语法,基本数据类型 3.变量:JavaScript使用关键字“var”声明变量并分配存储空间。变量名必须以字母或下划线开始，后面字符可以是字母、数字或下划线。JavaScript保留字不能做变量名。JavaScript保留字见教材p145。语法：var 变量名 或

7、var 变量名=变量值JavaScript变量采用弱类型表达方式，即声明时可以不说明变量类型，而根据使用时数据类型来确定变量类型。所谓弱类型意味着程序员可以随意改变某个变量的数据类型。,var age=thirty;age=30;,2023/11/8,14,6.2 JavaScript基本语法,基本数据类型 4.表达式:表达式是由变量、常量、运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有3种表达式：算术表达式：num1+23串表达式：hello+world逻辑表达式：A&B,2023/11/8,15,6.2 JavaScript基本语法,基本数据类型

8、5.运算符:赋值运算符算术运算符逻辑运算符比较运算符字符串运算符位运算符,2023/11/8,16,其它运算符,新建运算符（new）新建运算符是一个一元运算符，用于创建JavaScript对象实例，例如：var test=new Object();删除运算符（delete）删除运算符用于删除一个对象的属性或者一个数组的某个元素，也可以用于取消它们原有的定义。例如：delete arrayExample10delete objectExample.myproperty（假设对象objectExample存在属性myproperty）,2023/11/8,17,其它运算符,typeof运算符其运算

9、数可以是任意类型，运算结果返回一个字符串，用于表示运算数的类型。,2023/11/8,18,6.3 JavaScript控制结构和函数,6.3.1 JavaScript控制结构 1.条件语句ifelse2.switch 语句3.循环语句 for4.循环语句 while5.break和continue函数 必须先定义后使用由于浏览器先执行HTML文档中的部分，通常把自定义函数放在标记内，然后在标记内调用函数。,2023/11/8,19,6.3 JavaScript控制结构和函数,函数 定义规则：function 函数名（参数列表）函数体 function.html全局变量与局部变量 var.ht

10、ml全局变量可以在脚本的任何位置被引用。局部变量只存在于对它作出声明的函数内部。可以使用var关键字明确地为在函数中使用的变量设定一个作用域。,2023/11/8,20,6.3 JavaScript控制结构和函数,函数 参数个数可变的函数如果要实现的函数参数个数不确定，或者参数个数很多，又不想为每一个参数定义一个变量，可以在定义函数时保留参数列表为空，在函数体内部使用arguments对象来访问调用程序传递的所有参数。例argument.html,2023/11/8,21,6.3 JavaScript控制结构和函数,创建动态函数 使用Function对象语法：var varName=new F

11、unction(argument1,lastArgument)所有参数都必须是字符串型，最后这个参数是函数的功能 代码。例 deffun.htmlJavaScript中的系统函数encodeURI:返回一个对URI字符串编码后的结果。decodeURI:将已编码的字符串解码后返回。parseInt:将一个字符串按照指定的进制转化为整数。,2023/11/8,22,6.3 JavaScript控制结构和函数,JavaScript中的系统函数parseInt:格式：parseInt(numString,radix),如果没有第二个参数，则以”0”开头的转化为八进制，以”0 x”开头的转化为十六进制

12、，其余的转化为十进制。如果字符串中包含有不能转化的字符，只取前面部分进行转化，如果完全无法转化，返回一个NaN，需要用isNaN方法进行检测。parseFloat:将字符串转化为一个小数。isNan:检测parseInt和parseFloat方法返回值是不是NaN。escape:返回对一个字符串进行编码后的结果。unescape:eval:将参数字符串作为JavaScript表达式进行解释执行。例:sysfun.html,var x;eval(“alert(person1.”+x+”)”);,2023/11/8,23,6.4 JavaScript对象,在JavaScript中，对象是客观事物的

13、描述，它有内置对象和用户自定义对象两类。6.4.1 JavaScript对象概述对象包含属性和方法，属性是对象的静态特性的描述，是对象的数据，以变量表征（是隶属于某个特定对象的变量），方法是对象动态特性的描述，是对数据的操作，以函数描述（只有某个特定对象才能调用的方法）。对象必须存在才能被引用，有3种方法引用对象：引用JavaScript的内建对象引用浏览器环境提供的对象创建自定义对象,2023/11/8,24,6.4 JavaScript对象,自定义对象 只要定义了一个对象的构造函数，就等于定义了一个对象。使用new关键字和对象的构造函数就可以创建对象实例。语法格式：var objInsta

14、nce=new objName(参数列表);创建对象的步骤：定义对象的构造函数。使用new关键字和构造函数创建一个对象实例。可以为对象无限制的添加新成员。,function person()var person1=new person();person1.age=20;person1.name=“nice”;alert(person1.name+”:”+person1.age);,function person()var person1=new person();person1.age=20;person1.name=“nice”;function sayFunc()alert(person1

15、.name+”:”+person1.age);person1.say=sayFunc;person1.say();,2023/11/8,25,6.4 JavaScript对象,this关键字一个构造方法可以创建多个对象实例，各对象实例间没有任何关系，为一个实例增加的属性和方法不会影响到其他对象实例。但是在构造方法中增加的属性和方法会增加到每个由该构造方法创建的对象实例上。this关键字一般在用做对象成员方法的函数中出现，代表某个方法执行时，引用该方法当前的对象实例。,function Person(name,age)this.age=age;this.name=name;this.say=sa

16、yFunc;,2023/11/8,26,6.4 JavaScript对象,对象属性和方法的引用 1.对象属性的引用，有两种方式：（1）使用（.）运算符：对象实例名.属性成员名如：mystudent.name=张三（2）通过对象实例的下标引用对象实例名属性名字符串如：person1“age”=18 person1“name”=“nice”testattribute.html,采用第二种方法或eval函数可以实现对对象属性动态访问的效果。var x;var x;alert(person1x);eval(“alert(person1.”+x+”)”);,2023/11/8,27,6.4 JavaSc

17、ript对象,对象属性和方法的引用 2.对象方法的引用 使用（.）运算符引用对象方法：对象实例名.方法名（）如：person1.say(),2023/11/8,28,6.4 JavaScript对象,6.4.6 JavaScript对象应用案例 ex6-04.html,2023/11/8,29,6.4 JavaScript对象,对象的操作 1.forin语句 forin.html语法：for(变量名in 对象实例名)语句段用于对某个对象的所有属性进行循环操作，在不知道一个对象属性个数的前提下，将一个对象的所有属性名称都依次赋值给一个变量。2.with语句 with.html语法：with(对象

18、实例名)语句段,with(mystudent)id=001name=张三url=http:/,2023/11/8,30,6.7 JavaScript内置对象,JavaScript中提供的内部对象按照使用方式分为两种：动态对象，要先用new关键字创建对象实例，才能引用该对象的方法和属性。静态对象，无需创建对象实例，通过对象名.属性|方法的形式引用。Object对象提供所有 JavaScript 对象通用的功能。Object 对象被包含在所有其它 JavaScript 对象中；在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法，并在适当的时候通过 JScript 调用。

19、Object 对象提供了一种无须构造函数创建自定义对象的简单方式，格式：obj=new Object()Object.html,2023/11/8,31,6.7 JavaScript内置对象,6.7.1 String对象 创建方式：newString=new String(stringLiteral)用字符串文字显式创建（用“”或引起来的字符串被当作一个对象来对待，可以直接在字符串后面加上”.”来调用String对象的属性和方法。）区别：不能为字符串文字添加属性，而可以为每个用 new String 声明的 String 对象动态添加属性。String_test.html,var gamma,

20、delta;gamma=new String(字符串1);delta=new String(字符串2);gamma.test=10;,var alpha,beta;alpha=字符串1;beta=字符串2;alpha.test=10;,2023/11/8,32,6.7 JavaScript内置对象,6.7.1 String对象 String对象属性只有一个：length，用来统计字符串中字符的个数。String对象的主要方法：,String对象的其他方法：anchor 方法|big 方法|blink 方法|bold 方法|charAt 方法|charCodeAt 方法|concat 方法|fi

21、xed 方法|fontcolor 方法|fontsize 方法|fromCharCode 方法|indexOf 方法|italics 方法|lastIndexOf 方法|link 方法|match 方法|replace 方法|search 方法|slice 方法|small 方法|split 方法|strike 方法|sub 方法|substr 方法|substring 方法|sup 方法|toLowerCase 方法|toUpperCase 方法|toString 方法|valueOf 方法,2023/11/8,33,6.7 JavaScript内置对象,6.7.2 Math对象 Math对

22、象提供基本的数学函数和常数，是一个静态对象，不需要创建就可以使用如：var num=Math.sqrt(9)Math对象的主要属性：Math对象的主要方法：,Math对象的其他方法abs 方法|acos 方法|asin 方法|atan 方法|atan2 方法|ceil 方法|cos 方法|exp 方法|floor 方法|log 方法|max 方法|min 方法|pow 方法|random 方法|round 方法|sin 方法|sqrt 方法|tan 方法,2023/11/8,34,6.7 JavaScript内置对象,6.7.4 Date对象 1.语法形式：日期对象实例名=new Date()

23、如：MyDate=new Date()如果创建日期对象实例时没有特别指明时间，将把机器的系统时间放入MyDate变量。2.该对象没有属性。3.Date对象的主要方法：,2023/11/8,35,6.7 JavaScript内置对象,toString()方法是JavaScript中所有内部对象的一个成员方法，主要作用是将对象中的数据转化成某种格式的字符串表示，具体转换方式取决于对象的类型。例：查看整数x的十六进制和二进制形式。toString.html,2023/11/8,36,6.7 JavaScript内置对象,6.7.3 Array对象 1.语法格式:语法：数组对象实例名=new Arra

24、y()或var 数组名=Array()如：var arr1=new Array()var arr2=new Array(6)var arr3=new Array(“abc”,123,a,8.3)采用数组列表的方式定义：var arr3=“abc”,123,a,8.3,2023/11/8,37,6.7 JavaScript内置对象,6.7.3 Array对象 1.语法格式:如果在创建数组对象实例时没有给出元素个数，数组大小在引用数组时确定。数值数组：每个元素的下标是一个数字，每增加一个元素，这个数字就依次加1，数组下标从0开始。如果在填充数组时只给出了元素的值，这个数组就将是一个数值数组，它的各

25、个下标将被自动创建和刷新。可以在填充数组时为新元素明确的给出下标，下标不局限于整数数字。,var lennon=Array();lennonname=John;lennonage=18;,var lennon=Array();lennonname=John;lennonage=18;var beatles=Array();beatles0=lennon;beatles0name 的值？,2023/11/8,38,6.7 JavaScript内置对象,6.7.3 Array对象 2.Array对象的属性与方法常用属性是length，表示数组长度，即数组元素的个数。常用方法：join()：返回将数

26、组中所有元素连接而成的字符串。reverse()：将数组元素逆序排列。sort()：对数组元素进行排序,元素将按照 ASCII 字符顺序进行升序排列。,2023/11/8,39,6.7 JavaScript内置对象,6.7.3 Array对象 3.JavaScript数组对象的特点数组元素不要求数据类型相同，即可以给一个数组的不同元素赋于不同类型的值。数组元素可以是数组对象的实例，这时得到一个二维数组。数组的长度可以动态变化。6.3.3 JavaScript基本语法应用案例ex6-03.html array.html(自学),arr10=3arr11=张三arr12=false,var arr

27、=new Array(2)for(i=1;i8;i+)arri=new Array(3)或 var arr=Array(abc,3);var beatles=Array();beatles0=arr;,var arr=new Array(3)arr5=2,2023/11/8,40,上机作业,请用javascript编写一个参数不确定的函数myFunc，并在该函数中用object对象创建一个自定义对象实例myStudent，通过调用该函数myFunc(“classname”,“c001”,“personname”,“zhang”)可以向myStudent对象中动态增加自己的班级，姓名属性，并且将

28、这些属性用alert方法显示。编写一个网页，在每次刷新页面时会随机出现一个0-10之间的整数。提示：用Math.random()和Math.round,2023/11/8,41,用substring方法返回一个字符串中指定那部分子字符串。编写一个网页动态显示显示当前日期和时间。,2023/11/8,42,6.8 DOM编程,DHTML,表现层,结构层,2023/11/8,43,6.8 DOM编程,什么是DOM？DOM是一套对文档的内容进行抽象和概念化的方法。W3C推出的标准化DOM可以让任何一种程序设计语言对使用任何一种标记语言编写的任何一份文档进行操控。W3C文档对象模型（DOM）是一个与系

29、统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。W3C DOM提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作他们。,2023/11/8,44,6.8 DOM编程,什么是DOM？DOM被分为不同的部分（核心，XML和HTML）和不同的版本（DOM 1/2/3）W3C的第一个DOM规范DOM1是于1998年10月发布的，主要面对XHTML和XML文档模型。DOM2是于2000年11月发布的，它制定了样式表文档模型，并说明了如何将样式信息附加到一个文档中，此外还包含了文档遍历方面的内容，提供了一个既完整有全面的事件模型。DOM3

30、添加了XML(DTD与模式)内容模式的处理，文档检验，文档视图和格式化方面的内容，并添加了一些关键事件和事件组。,2023/11/8,45,6.8 DOM编程,什么是HTML DOM？HTML DOM是针对HTML的文档对象模型 HTML DOM是独立的语言和平台 定义了针对HTML的标准对象集合以及访问和操作HTML文档的方法 HTML DOM是一个W3C的标准 HTML DOM将HTML文档视为嵌套其他元素的树型结构元素。所有的元素，它们包含的文字以及他们的树型都可以被DOM树所访问到。它们的内容可以修改和删除，并且可以通过DOM建立新的元素。元素的文字和它们的属性被识别为点。,2023/

31、11/8,46,6.8 DOM编程,A simple document Breakfast 0 1 Lunch 1 0,DOMIntro.html,2023/11/8,47,6.8 DOM编程,节点类型:在DOM中存在着许多不同类型的节点，有些DOM节点类型还包括其他类型的节点。元素节点文本节点：在xhtml文档中，文本节点总被包含在元素节点的内部，但并非所有的元素节点都包含有文本节点。属性节点：所有的属性节点都包含在元素节点内部。,DOMIntro.html,dont forget to buy this stuff,2023/11/8,48,6.8 DOM编程,节点类型:,dont for

32、get to buy this stuff,2023/11/8,49,6.8 DOM编程,在本课程中只讨论利用脚本程序访问DOM对象，以实现对浏览器本身，网页文档以及网页文档中的HTML元素等的操作，从而控制浏览器和网页元素的行为和外观。,DOMIntro.html,2023/11/8,50,DOM对象模型中各个对象间的层次关系,2023/11/8,51,6.8 DOM编程,事件驱动与事件处理 DOM除了定义各种对象外，还定义了各个对象所支持的事件，以及各个事件所对应的用户的具体操作。检测浏览器和浏览器用户的动作并为这些动作提供相应的处理，这些处理是利用一种特殊格式的编程技术，即事件驱动编程来

33、实现的。事件是一个由浏览器和JavaScript系统为了响应某些正在发生的情况而隐式创建的对象。事件处理信息包括事件的名称和引发事件的HTML元素。,2023/11/8,52,6.8 DOM编程,事件驱动与事件处理 事件不仅在用户对计算机进行的操作的过程中产生，同时浏览器自己的一些工作也会产生事件。处理事件的程序或函数称为事件处理程序。将事件处理程序连接到事件的过程称为注册。,2023/11/8,53,6.8 DOM编程,事件驱动与事件处理 HTML定义了一组事件，浏览器已经实现了这些事件，利用JavaScript可以对这些事件进行处理。这些事件是与HTML标签属性相关联的，它可以将事件和事件

34、处理程序相关联起来。,2023/11/8,54,处理事件,通过HTML属性处理事件事件处理器是作为HTML的属性值来表示和应用的，例如：除了直接使用JavaScript代码串，更好的方法是通过事件处理器调用函数，通过函数完成事件处理。,function printMessage(message)alert(message);,step1定义函数,step2调用函数,2023/11/8,55,处理事件,通过JavaScript属性处理事件同样的功能通过JavaScript属性指定事件处理器来实现：document.forms0.infoButton.onclick=function()alert

35、(按钮的click事件被触发！);onclick.html使用JavaScript的属性来表示事件处理器的好处：减少了HTML和JavaScript的混合使用，简洁明了。事件处理器的代码不必是确定的，可以根据需要动态创建和修改。Onclick_1.html,2023/11/8,56,6.8 DOM编程,6.8.2 事件处理程序注册方法：例：实现屏蔽鼠标右键弹出快捷菜单的功能。（单击鼠标右键将触发document对象上的oncontextmenu事件）event1.htmlevent2.htmlevent3.html,2023/11/8,57,JavaScrpt中的事件处理,处理链接事件与链接相

36、关的事件一共有九个，常用的有click事件，mouseOver事件和mouseOut事件等等。mouseOver事件举例：,2023/11/8,58,JavaScrpt中的事件处理,定义函数function printMessage(message)alert(message);调用函数 请把鼠标放过来，看看会发生什么事情：）A_link.html,2023/11/8,59,JavaScrpt中的事件处理,处理窗口事件窗口事件主要用来处理普通的HTML文档以及包含帧结构的HTML文档，常用的有load、unload、blur、focus等事件。Onload,onunload事件举例,2023/

37、11/8,60,JavaScrpt中的事件处理,定义函数function loadHandle()alert(窗口执行了load事件！);function unloadHandle()alert(窗口执行了unload事件！);调用函数Onload.html,2023/11/8,61,JavaScrpt中的事件处理,处理图形事件图形事件用于了解图形的加载状况、判断加载过程中是否发生中断或者错误，从而构建丰富多彩的Web应用。关于图形load事件的例子：,2023/11/8,62,JavaScrpt中的事件处理,定义函数function imageLoadHandle()alert(图形加载完成

38、！);调用函数,2023/11/8,63,JavaScrpt中的事件处理,处理图形映射事件图形映射是一类比较特殊的图形事件，由分布在不同区域的图形组成，用户单击图形的某个区域，便可以连接与该区域相关的URL。,2023/11/8,64,JavaScrpt中的事件处理,定义函数function messageHandle()alert(您点击的是图形的第二个映射区！);调用函数,2023/11/8,65,JavaScrpt中的事件处理,处理表单事件在JavaScript实际应用中，最常处理的事件就是表单事件。窗体提供了许多图形用户界面控件，帮助用户完成Web交互，例如：文本框、单选框、复选框、按

39、钮等等。,定义函数,function checkValid(s)var len=s.length;for(var i=0;ilen;i+)if(s.charAt(i)!=)return false;return true;,2023/11/8,66,JavaScrpt中的事件处理,定义函数,function cancelHandle()document.forms0.userName.value=;document.forms0.passWord.value=;,调用函数,处理表单事件,function okHandle()if(checkValid(document.forms0.userN

40、ame.value)alert(用户名称不能为空！);else if(checkValid(document.forms0.passWord.value)alert(用户密码不能为空！);else alert(您填写正确！);,2023/11/8,67,JavaScrpt中的事件处理,处理表单事件调用函数用户名：密码：,Form_example.html,2023/11/8,68,JavaScrpt中的事件处理,处理错误事件JavaScript1.1及其以后版本引入了error事件，提供了在脚本执行过程中处理错误的功能。图像、窗口以及框架对象有error事件，其中image对象的onError

41、事件处理器可以处理与加载图形相关的错误，而windows对象的onError事件处理器可以处理与加载文档相关的错误。处理错误事件不同于处理其他事件，事件处理函数不需要自己编写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个参数描述所发生错误的信息；第二个参数是一个URL，指明引起错误的JavaScript代码所在的文档；第三个参数是该文档中错误代码所在行的行号。,2023/11/8,69,JavaScrpt中的事件处理,处理错误事件,定义函数,function errorHandler(errorMessage,url,line)var message=错误信息：+errorMessa

42、ge+n错误文档的URL：+url+n错误的行号：+line;alert(message);onerror=errorHandler;,实现错误处理功能的关键是通过下面的代码把window的onerror属性设置为错误事件处理器：onerror=errorHandler;,2023/11/8,70,JavaScrpt中的事件处理,处理错误事件如果将错误事件处理函数的名称赋给了window对象的onerror属性，那么发生的错误将会被处理。例如点击按钮时调用不存在的函数okHandle()：Onerror.html,2023/11/8,71,6.8.3 window对象,6.8.3.1 wind

43、ow对象的构成 window对象是系统内建对象中的顶层对象，指的是浏览器窗口对象。每当窗口含有或是标签就会自动建立window对象。对window对象的属性和方法的引用，可以省略“window.”这个前缀，如window.alert(“hello”)等价于alert(“hello”)。,2023/11/8,72,6.8.3 window对象,6.8.3.2 window对象属性,2023/11/8,73,6.8.3 window对象,6.8.3.3 window对象方法1、windows对象的主要方法：,window.html,2023/11/8,74,6.8.3 window对象,6.8.3

44、.4 window对象事件HTML中没有这样的标签，window对象的事件处理器需要作为标签的事件属性设置。window-event.html(请自学)通用事件,2023/11/8,75,6.8.3 window对象,6.8.3.5 window对象的对象属性1.location对象：用于设置和返回当前网页的URL信息。属性：href,让浏览器载入一个新的URL文档。如：=“http:/”与window.navigate(“”)作用一样。方法：replace(“url”):载入新的网页 reload()：重新载入（刷新）当前网页,2023/11/8,76,6.8.3 window对象,2.ev

45、ent对象：用于设置和获取当前事件的有关信息。属性：,altKey,ctrlKey,shiftKey：分别用来检测事件发生时,alt,ctrl,shift键是否被按下clientX,clientY：设置和返回鼠标相对客户区（窗口中不包括边框和滚动条的区域）顶点的x,y坐标screenX,screenY：设置和返回鼠标相对屏幕顶点的x,y坐标offsetX,offsetY：设置和返回鼠标相对事件源顶点的x,y坐标x,y：设置和返回鼠标相对事件源的父元素顶点的x,y坐标returnValue：设置和返回事件的返回值，以便浏览器判断是否继续对当前事件按默认方式处理。cancelBubble：设置和返

46、回当前事件是否继续向下传递。srcElement：设置和返回事件源对象。keyCode：设置和返回键盘按下时按键的unicode码Button：检索鼠标移动、按下、弹起时使用的是哪个鼠标按键。,eventobject.htmlEventobject_onkeypress.html,2023/11/8,77,6.8.3 window对象,3.frames对象：windows对象的frames属性是一个数组，是用于对HTML的帧标签或进行编程的JavaScript对象。代表某个窗口所有帧的集合，可以返回各个帧窗口对应的window对象。frames_1.html(自学)frame.html,202

47、3/11/8,78,6.8.3 window对象,4.screen对象这个对象中的一些属性提供了显示器分辨率和色彩度等信息。5.clipboardData对象这个对象提供了读写剪贴板内容的方法。6.history对象这个对象提供了重新装载浏览器曾经访问过的url列表中某个url的方法。7.navigator对象提供了获取浏览器名称、版本号、所用的操作系统、CPU类型、浏览器的国家语言等方面的属性信息。8.document对象,2023/11/8,79,6.5 window对象在JavaScript中的应用,6.5.5 window对象应用案例 1.状态栏内容的更新 ex6-05.html(自学

48、)2.打开一个新窗口 ex6-06.html(自学)3.客户端输入信息验证 ex6-07.html,2023/11/8,80,6.6 document对象,document对象代表浏览器窗口中装载的整个HTML文档，文档中的每个HTML元素都可以用一个JavaScript对象来与之对应，作为document对象的直接或间接属性来引用。6.6.1 document对象属性 document对象的属性包括对应HTML的标签的一些属性和描述网页文档自身信息的一些属性。,Document_prop.html(自学),描述网页文档自身信息的属性：charset：设置或返回浏览器显示网页内容所使用的当前编

49、码字符集。defaultCharset：返回浏览器的默认编码字符集名称。cookie：设置或返回Cookie字符串。fileCreatedDate：返回网页文挡的创建时间的字符串格式。fileModifiedDate：返回网页文档的修改时间的字符串格式。fileSize：返回当前网页文档的大小。URLUnencoded：返回浏览器访问当前网页时所采用的URL地址的URL解码后的字符串。referrer：返回导航到当前网页的超连接源的URL地址。URL：设置或返回浏览器访问当前网页时所采用的URL地址。,2023/11/8,81,6.6 document对象,6.6.2 document对象方法

50、,Document_method.html,getElementByID：返回id属性值等于指定参数的HTML元素所对应的对象。getElementByName：返回name属性值等于指定参数的所有HTML元素对象对应的对象数组。getElementsByTagName：返回标签名等于指定参数的所有HTML元素对象对应的对象数组。需要注意的是该方法是对象的方法，任何对象都可以调用该方法。createElement：产生一个代表某个HTML元素的对象，元素节点。createTextNode：创建一个文本节点。createStyleSheet：为HTML文档产生一个样式表或增加一条样式规则。,20