JavaScript编程基础(修正)_第1页
JavaScript编程基础(修正)_第2页
JavaScript编程基础(修正)_第3页
JavaScript编程基础(修正)_第4页
JavaScript编程基础(修正)_第5页
已阅读5页，还剩82页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一次作业创立并运行假设干简单的网页，包含以下内容：(1)完成教材15页的本章实验，并截图显示在网页上证实自己的机器上已经部署好IIS、SQLServer、VS或VWD等根本软件；(2)你的个人介绍，方方面面的个人信息〔不涉及个人隐私〕；(3)你对本专业以及本门课程的理解、建议与期望等。(4)要使用CSS将网页风格化。每人一个以长学号命名的文件夹【例如：2023344436】第3章JavaScript编程根底本章主要内容3.1JavaScript简介3.2JavaScript编程根底3.3浏览器对象模型3.4文档对象模型3.5客户端动态网页编程3.1JavaScript简介3.1.1JavaScript的起源20世纪90年代，上网越来越流行，对开发客户端脚本的需求也逐渐增大。此时，网页已经不断地变得更大和更复杂，而大局部Internet用户还仅仅通过28.8kbit/s的速率连接到网络，更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与效劳器进行屡次往返交互。在Microsoft公司进军浏览器市场后，有3种不同的JavaScript版本同时存在：NetscapeNavigator3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，JavaScript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题。几点说明：语法习惯上，JavaScript与Java、C#非常相似。Java与JavaScript，并无太多关系。W3C教程JQuery是一个JavaScript库，

极大地简化了JavaScript编程，很容易学习。3.1.2JavaScript的特点JavaScript是一种脚本语言，采用小程序段的方式进行编程。JavaScript是一种功能强大的语言，它可以和HTML完美地结合在一起。JavaScript是一种基于对象〔ObjectBased〕和事件驱动〔EventDriver〕的编程语言。JavaScript用于客户端。3.1.3JavaScript的作用JavaScript可以弥补HTML的缺陷，可以制作出多种网页特效，其主要作用有：〔1〕增加动态效果〔2〕读写HTML元素〔3〕响应事件〔4〕验证表单数据〔5〕检查浏览器〔6〕创立Cookies3.1.4JavaScript的组成JavaScript作为一种网络客户端的脚本语言，由以下3局部组成：〔1〕ECMAScript〔2〕文档对象模型〔DocumentObjectModel，DOM〕〔3〕浏览器对象模型〔BrowserObjectModel，BOM〕3.1.5JavaScript程序的编辑和调试JavaScript的编写形式有以下3种：

1．直接把JavaScript嵌入HTML的任何标签中2．使用JavaScript函数时，将函数定义在<head>标签中3．使用单独的.js文件第一个JavaScript程序<html><head><scripttype="text/javascript">functiondisplaymessage(){alert("HelloWorld!")}</script></head><body><form><inputtype="button"value="Clickme!"onclick="displaymessage()"></form></body></html><html><body><scripttype="text/javascript">document.write("HelloWorld!");</script></body></html><html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>实时显示时间</title><scripttype="text/javascript"><!--setInterval("showTime()",1000);functionshowTime(){vard,s;d=newDate();s=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();="<h1>当前时间：<fontcolor=blue>"+timetxt.innerHTMLs+"</font></h1>";}//--></script></head><body><divid="timetxt"align="center"></div></body></html>在网页中嵌入JavaScript脚本JavaScript脚本的引入方法通过<script>与</script>标签对引入。将JavaScript脚本代码放在<script>与</script>之间，浏览器自动识别该标签对并逐行解释其间的代码。通过<script>标签的src属性引入。将包含在<script>与</script>标签对之间的代码放入扩展名为.js的脚本文件中，然后在HTML文档中通过<script>标签的src属性来引用该脚本文件。在网页中嵌入JavaScript脚本JavaScript脚本的引入方法通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称，JavaScript伪协议的一般格式为：javascript:URL。其中“javascript:〞是伪协议说明符，URL的主体可以是任意的JavaScript代码，多个语句之间使用分号进行分隔。例如：<imgsrc="hua.jpg"onClick="javascript:vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距离2023年春节还剩下'+days+'天!')">JavaScript消息框警告框alert("文本")警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。确认框confirm("文本")确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。提示框prompt("文本","默认值")提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。在网页中嵌入JavaScript脚本JavaScript脚本的引入方法通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件，方法是将脚本指定为事件属性的值，以响应系统或用户的动作。事件属性名称由事件名称加一个“on〞前缀构成，如onClick，onMouseOver等。例如：<scripttype="text/javascript"><!--functionshowMsg(){vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距离2023年春节还剩下'+days+'天!');}//--></script><imgsrc="hua.jpg"onClick="showMsg()">在网页中嵌入JavaScript脚本嵌入JavaScript脚本的位置

JavaScript脚本可放在HTML文档中任何需要的位置。一般来说，可以在<head>与</head>标签对、<body>与</body>标签对之间放置JavaScript脚本代码。放置在<head>与</head>标签对之间的JavaScript脚本一般用于提前载入，以响应用户的页面动作，且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容，应将JavaScript脚本放置在<body>与</body>标签对之间。使用单独的.js文件考虑到代码的复用性和移植性，将JavaScript代码单独放到扩展名为.js的独立文件中，在需要的页面使用src指明文件的位置即可。<html><head><scripttype="text/JavaScript"src="JSript.js"></script></head><body><scripttype="text/JavaScript">write();</script></body></html>3.2JavaScript编程根底3.2.1JavaScript的变量无论是编程语言还是脚本语言，变量都是最根本的元素，在脚本运行时，往往需要用一个有名称的单元将信息存储起来，这个有名称的单元就是变量。词法规那么标识符的第一个字符必须是字母、下划线或美元符号，后续字符可以是字母、数字、下划线或美元符号。不能使用JavaScript中的关键字、保存字作为标识符。JavaScript是一种区分大小写的脚本语言。注意处理与HTML的关系。以分号作为语句结束。单行注释//，多行注释/*….*/。1．变量的声明方式JavaScript中变量的名称区分大小写，使用关键字var来声明变量。JavaScript并没有强制要求变量必须先声明才使用，但是先声明变量再使用是一种良好的编程风格。2．变量类型JavaScript不要求预先确定变量的数据类型，但实际上，每个JavaScript变量都对应一个数据类型的值，例如，如果box=3，那就认为box变量是数值类型的变量。JavaScript是一种弱类型语言，弱类型语言中变量赋值的数据类型是可以发生变化的。ECMAScript中定义了5种原始类型〔primitivetype)：undefined、null、boolean、number和string。〔1〕undefined类型：声明的变量未初始化时，该变量的初始值是undefined。〔2〕null类型：用于尚未存在的对象，值undefined实际是从值null派生的。〔3〕boolean类型：只有两个值true和false。〔4〕number类型：任何数字都被看做是number类型的字面量〔5〕string类型：字符串类型。根本数据类型根本数据类型和常量当某种根本类型的数据项直接出现在程序中时，称之为常量，即值不能被改变的量。数值型：最根本的数据类型，包括整型和浮点型整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等。浮点型常量：可以使用小数或指数方法表示，如12.34、5.9e7、4.3e-5等。特殊的数值型常量：Infinity表示正无穷大，-Infinity表示负无穷大，NaN表示“不是一个数值〞、“没有意义的运算〞或“无法转换成数值类型〞。如5/0的运算结果为Infinity，-5/0的运算结果为-Infinity，0/0的运算结果为NaN。根本数据类型根本数据类型和常量字符串型：表示文本的数据类型字符串常量：用""或''括起来的假设干个字符，如"JavaScript"、'ThisisabookofC++'等。转义字符：以反斜杠\开头的具有特殊功能的字符。转义字符功能说明\b退格\f换页\n换行\r回车\t制表\'单引号\"双引号\\反斜线根本数据类型根本数据类型和常量布尔型：表示状态的数据类型布尔常量：只有两个可能的值true和false，表示“真〞和“假〞两种状态。如5>3的运算结果为true，“Chinese〞<“China〞的运算结果是false。变量变量是存放常量的容器，主要作用是存取数据。变量的声明：在JavaScript中，可以先通过关键字var来声明变量，然后再使用。例如：varnum;varstr,flag;num=100;str="JavaScriptLanguage";flag=true;根本数据类型变量的初始化：变量可以在声明的同时指定初始值。例如：varnum=100;varstr="JavaScriptLanguage",flag=true;

仅用var声明但未初始化的变量获得默认初值undefined。变量的类型实际类型视变量内容而定。例如，上例中的num为数值型变量，str为字符串型变量，flag为布尔型变量。变量的类型可以根据变量内容的改变而自动更改。例如：varnum=1;//num为数值型变量

num="HelloWorld!";//num为字符串型变量变量可以不经过var声明就直接使用，而在变量赋值时自动声明该变量。例如：num=100;str="JavaScriptLanguage";flag=true;好的编程风格：所有变量在第一次使用前都用var进行声明！3．typeof运算符使用typeof可以得到一个变量或值的类型。例如：varsTemp="teststring";alert(typeofsTemp);//输出"string"alert(typeof86);//输出"number"4．类型转换〔1〕转换成字符串:toString()varboo=newBoolean(true);document.write(boo.toString());〔2〕转换成数字parseInt(),parseFloat()varx=parseInt("123");varx=parseFloat("123mm");〔3〕强制类型转换varx=String(123);varx=Number("123");3.2.2数组1．数组的定义JavaScript中的数组是内部类型Array的对象，因此，可以使用如下方式创立数组。varmyArray=newArray();//创立一个长度为0的数组varmyArray=newArray(n);//创立一个拥有n个元素的数组，每个元素为undefined类型varmyArray=newArray(1,2,"abc");//创立一个长度为3的数组，并赋初值同时，也支持使用括号来定义数组，例如：varmyArray=[];//创立一个长度为0的数组varmyArray=[1,2,"abc"];//创立一个长度为3的数组2．数组元素的访问数组元素按索引进行访问，索引号从0开始记。例如：myArray[2]=4;//将4赋值给myArray数组的第3个元素vari=myArray[2];//将myArray数组的第3个元素的值赋给变量i3．动态数组JavaScript数组的长度不是固定不变的，假设要增加数组的长度，直接赋值即可。例如：varmyArray=newArray(1,2,3);myArray[3]=4;这时myArray的长度为4，如果varmyArray=newArray(1,2,3);myArray[4]=4;那么长度为5，其中myArra[3]的值为undefined。4．数组的常用属性和方法length属性：获取数组长度。concat方法：连接两个或更多的数组，并返回结果。也可以直接连接数值，例如：a.concat(4,5,6);join方法：连接数组，缺省的连接符号为“，〞。push方法：在数组的结尾添加一个或多个项，同时更改数组的长度。pop方法：删除最后一个数组项，将其作为函数值返回。shift方法：删除数组中的第一个项，将其作为函数值返回。unshift方法：添加元素至数组开始处。slice方法：返回数组的片断〔或者说子数组〕。splice方法：从数组中替换或删除元素。sort方法：数组排序。sort方法可以指定比较函数，根据比较函数进行排序。reverse方法：将数组倒序。3.2.3string类型字符串〔string〕类型在JavaScript中用得很多，这里简单介绍其主要属性和方法。字符串由多个字符组成，使用双引号或单引号可定义一个字符串常量，并可赋给一个字符串类型的变量，利用length属性可获取字符串的长度。*参见教材40页3.2.4JavaScript的函数1．函数的定义2．arguments对象无需指明参数名，也不限参数个数3．函数是对象function是Function类的实例化函数在JavaScript中，函数用来封装那些在程序中反复使用的程序段，常作为事件处理程序被调用。函数的根本组成函数定义一般格式：function函数名([参数列表]){函数体;[return返回值;]}说明：function：定义函数的关键字。函数名：函数的标识符，表示函数的入口地址。参数列表：包含假设干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数列表中传入常量值、变量值或其它表达式的值，函数内的程序语句可以通过参数名称来引用传进来的这些值。参数列表也可以为空。函数体：实现函数功能的程序语句。return：指定函数返回值的关键字。return语句负责将函数的执行结果返回到程序中函数调用的位置，一个函数中最多只能有一条return语句。函数例定义一个求阶乘的函数

functionfact(n){vars=1,i; for(i=1;i<=n;i++) s=s*i; returns;}定义函数的关键字函数名参数列表函数体返回函数的执行结果函数函数调用一般格式：函数名(实参列表);说明：实参列表中包含假设干个实际参数，参数之间用逗号间隔，实参个数应与函数定义时参数列表中的参数个数相等。实参的表示形式可以是常量、变量或者表达式，所有实参都必须得到具体的赋值。函数调用时的参数传递都是以值传递的方式进行的。也就是说，在函数中将某个传进来的变量值改变了，并不会影响原来函数外的变量值。例如：functioninc(n){n++;alert(n);}varx=5;inc(x);alert(x);函数调用参数传递函数定义程序运行结果：

n=6x=5函数函数的作用域在函数外部声明的变量称为全局变量，全局变量在程序的任何地方都可以使用。在函数内部声明的变量称为局部变量，局部变量应用关键字var声明，没有用var声明的局部变量在函数执行完毕后会变成全局变量。程序运行结果：

sum=8程序运行结果：

y未定义functioninc(n){y=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);functioninc(n){vary=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);函数函数的嵌套与递归函数的嵌套：嵌套定义是指在定义一个函数的过程中定义另一个函数，定义在某个函数内部的函数称为局部函数，其作用域局限在所属的框架函数。嵌套调用是指在调用一个函数的过程中又调用另一个函数。例如：functionlcm(m,n){//框架函数，求最小公倍数

varres;functiongcd(m,n){//局部函数，求最大公约数

vara,b,t;if(m<n){t=m;m=n;n=t;}a=m;b=n;while((r=a%b)!=0){a=b;b=r;}returnb;}res=m*n/gcd(m,n);//嵌套调用gcd函数

alert(m+"和"+n+"的最小公倍数是"+res);}函数函数的递归：递归调用是指函数在调用过程中直接或间接调用自身，是一种特殊的嵌套调用。例如：functionfac(n){varres;if(n==1)res=1;elseres=n*fac(n-1);//递归调用

returnres;}varn=parseInt(prompt("请输入整数",""));varf=fac(n);alert(n+"的阶乘是"+f);2.Arguments对象

JavaScript不要求函数的实参与形参完全一致。使用特殊对象Arguments，无须指出参数名，就能访问它们。例如，如下函数SayHi()就可以有两种调用形式。functionSayHi(){

if(arguments[0]=="bye"){return;}alert(arguments[0]);}调用形式1：<scriptlanguage="javascript">

SayHi("test");</script>433.2.4JavaScript的函数调用形式2：<scriptlanguage="javascript">

SayHi("test",123);</script>函数可以接受多个参数而不会引发错误。443.2.4JavaScript的函数例：利用Arguments对象求和。<htmlxmlns=":///1999/xhtml"><head><title>JavaScript的函数参数数组</title><scripttype="text/javascript">functionsumInteger()//使用参数数组获取传递的参数{vartotal=0;for(vari=0;i<sumInteger.arguments.length;i++)//获取传递的所有参数 {total+=sumInteger.arguments[i];}returntotal;}</script></head>453.2.4JavaScript的函数<body><h2>JavaScript的函数参数数组</h2><hr/><scripttype="text/javascript">varintTotal=0;//声明变量

intTotal=sumInteger(1,100,98,29);document.write("函数sumInteger(1,100,98,29)="+intTotal+"<br/>");</script></body></html>463.2.4JavaScript的函数3.2.5JavaScript对象化编程创立对象最简单的方法是使用“属性名：值〞格式项的集合。属性名要求是一个JavaScript的有效标识符或者是一个字符串，属性值可以是一个常量、一个表达式或一个函数，项之间使用逗号分隔。例如：varpose={x:0,y:0,theta:0};2．添加、删除对象的属性JavaScript中的对象在定义好后还可以添加或删除其属性，例如：varpose={x:0};pose.y=0;pose.theta=0;上述代码中的第一句还可以改写成为：varpose={};//或者为varpose=newObject();pose.x=0;使用delete关键字可以删除一个对象的属性，属性删除之后自然就不能再访问了。例如，下面的代码完成对pose对象theta属性的删除。deletepose.theta;3．添加对象的方法如果对象的属性保存的是一个函数，那么此函数称为对象的方法，例如，下面的代码给pose对象添加了一个showInfo()方法，然后调用它。varpose={x:0,y:0,theta:0};//添加对象的方法pose.showInfo=function(){return"x="+pose.x+",y="+pose.y+",theta="+pose.theta;}//调用对象的方法alert(pose.showInfo());4．构造函数在默认情况下JavaScript不会为对象创立构造函数，这样前面例子中定义的pose对象就无法通过“newpose()〞表达式直接创立，而只能先创立一个Object对象，然后再向这个已创立的对象添加需要的属性和方法，这样就不能表达出类型的特点。给对象定义相应的构造函数就可以解决这个问题。5．prototype属性//定义student类functionstudent(sname,ssex,sscore){=sname;this.sex=ssex;this.score=sscore;}//创立两个对象varst1=newstudent("张三","男",59);varst2=newstudent("李四","女",38);//给st1添加一个方法showInfo1st1.showInfo1=function(str){alert(str);}//调用两个对象都有的showInfo方法st1.showInfo();st2.showInfo();//调用新添加的方法st1.showInfo1("调用st1的showInfo1方法");st2.showInfo1("调用st2的showInfo1方法");//该行运行会报错：对象不支持此属性或方法3.2.6事件驱动及事件处理JavaScript是基于对象的语言，基于对象的根本特征就是采用事件驱动机制，这里的事件包括鼠标或键盘的动作。所谓事件驱动，是指由鼠标或键盘的动作引发的一连串程序的动作；浏览器为了响应某个事件而进行的处理过程称为事件处理。浏览器在程序运行的大局部时间里都在等待交互时间的发生，并在事件发生时，自动调用事件处理程序完成事件处理过程。<ahref="/index.html"onmouseover="alert('Welcome');returnfalse"></a>常见的事件常见的事件常见的事件用JavaScript处理事件JavaScript语言与HTML文档相关联主要是通过“事件〞，JavaScript的函数就是用于处理事件的程序，事件的语法规那么如下。事件=“函数名〞或事件=“JavaScript语句〞例如：<inputtype="button"value="[测试]"onclick="alert('helloworld');"/>也可以定义好函数后再调用，例如：functionmessage(){alert('helloworld');}<inputtype="button"value="[测试]"onclick="message();〞/>3.实例练习实例1：装载与卸载<head><title>用JavaScript处理事件</title><scripttype="text/javascript">functionLoadForm(){alert("这是一个装载的例子");}functionUnLoadForm(){alert("这是一个卸载的例子");}</script></head><bodyonload="LoadForm();"onunload="UnLoadForm();"><ahref="t.htm">测试</a></body></html>3.实例练习实例2：验证输入<head><title>无标题文档</title><scripttype="text/javascript"language="javascript">functionvalidate(){if(user.value==""){alert("请输入！！！");}}</script></head><body><inputtype="text"name="user"/><inputtype="submit"value="提交"onclick="validate();"/></body>3.3浏览器对象模型3.3.1体系结构

浏览器对象模型3.3.2window对象

在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写window.alert()。要引用窗口中的一个框架，可以使用如下语法。frame[i] //当前窗口的框架self.frame[i] //当前窗口的框架w.frame[i] //窗口w的框架要引用一个框架的父窗口〔或父框架〕，可以使用下面的语法。parent //当前窗口的父窗口self.parent //当前窗口的父窗口w.parent //窗口w的父窗口要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法。top //当前框架的顶层窗口self.top //当前框架的顶层窗口f.top //框架f的顶层窗口使用window对象完成的常用功能1．导航和翻开新窗口2．关闭窗口3．系统对话框4．时间间隔和暂停例如：翻开一个窗口，加载页面1.html，窗口设有工具栏、地址栏、状态栏，没有菜单栏、滚动栏和目录按钮，窗口高300像素、宽300像素，具体实现的代码如下：varwindow1=window.open(“1.html〞,null,“toolbar=yes,location=yes,status=yes,directories=no,menubar=no,scrollbars=no,height=300,width=300〞);//null代表默认值2.关闭窗体：window.close();1.window对象例：JavaScript对话框<htmlxmlns=":///1999/xhtml"><head><title>JavaScript对话框</title><scripttype="text/javascript">functionbtnAlert_onclick(){alert("这是一个警告对话框，常用于输出一些信息");}functionbtnConfirm_onclick(){varret=confirm("这是确认操作对话框，提供两个按钮供用户选择");varinfo=document.getElementById("info");//返回指定对象的引用if(ret==true)info.innerHTML="你按了确定按钮";elseinfo.innerHTML="你按了取消按钮";}3．系统对话框functionbtnPrompt_onclick(){varret=prompt("这是一个提示信息","用户请在此输入");varinfo=document.getElementById("info");if(ret!="")info.innerHTML="您输入了："+ret;if(ret=="")info.innerHTML="您按了确定按钮，但没有输入信息";if(ret==null)info.innerHTML="您按了取消按钮";}</script></head>3．系统对话框<bodystyle="text-align:center;"><h2>JavaScript对话框</h2><hr/><inputid="btnAlert"type="button"value="alert:警告对话框"onclick="return

btnAlert_onclick()"/><br/><br/><inputid="btnConfirm"type="button"value="confirm：确认操作对话框"onclick="returnbtnConfirm_onclick()"/><br/><br/><inputid="btnPrompt"type="button"value="prompt：用户输入对话框"onclick="returnbtnPrompt_onclick()"/><br/><br/><divid="info"></div></body></html>3．系统对话框4．时间间隔和暂停<htmlxmlns=":///1999/xhtml"><head><title>显示当前时间</title><scripttype="text/javascript">functionShowTime(){varShowTimeDiv=document.getElementById("currentTime");if(ShowTimeDiv){ShowTimeDiv.innerHTML=“当前时间：〞+(newDate).toLocaleTimeString();//时间局部转为字符串}}varintervalID;functionBeginShowTime(){intervalID=setInterval(ShowTime,1000);setTimeout("alert('隔3秒后弹出此消息框，只显示一次。')",3000);}

4．时间间隔和暂停functionStopShowTime(){clearInterval(intervalID);}</script></head><bodystyle="text-align:center;"><h2>显示当前时间</h2>展示setTimeout和setInterval的用法。<br/><hr/><divid="currentTime"></div><br/><inputname="btnStart"type="button"value="显示时间"onclick="BeginShowTime();"/><inputname="btnEnd"type="button"value="停止刷新显示时间"onclick="StopShowTime();"/></body></html>3.3.3Document对象Document对象比较独特，它既属于BOM，又属于DOM。每个载入浏览器的HTML文档都会成为Document对象，Document对象使用户可以从脚本中访问HTML页面中的所有元素。Document对象是Window对象的一局部，可通过window.document属性对其进行访问。Document对象实例例如：<body><imgsrc="logo.gif"name="imgHome"/><formmethod="post"action="1.htm"name="data"><inputtype="text"name="txtEmail"/><inputtype="submit"value="提交"/></form></body>访问body中img图像的代码如下。document.images[“imgHome〞];访问表单中输入框的代码如下。document.forms[“data〞].txtEmail;2．Document对象的方法Document对象的常用方法有write、writeln、clear、open和close等。write将字符串写到一个新文档中；writeln将字符串写到一个新文档，并在字符串末尾加上换行符；clear去除文档当前内容；open和close翻开一个新文档并关闭当前文档。Document对象的方法实例动态引入.js文件的功能。在该例中将</script>进行了拆分，这是因为浏览器一遇到</script>，就会假定其中的代码是完整的〔即使它出现在字符串中〕，这样就会忽略后面的代码。<scripttype="text/javascript">document.write("<scripttype='text/javascript'src='1.js'>"+"</scr"+"ipt>");</script>3.3.4Location对象Location对象提供当前页面的URL信息，它有一组属性，用于存储URL的各个组成局部。它的方法可以重载当前页面或载入新页面。例如，有如下的URL。://zjl.xom:80/book/1.html#section11．Location对象的属性属性说明在上例中的应用情况hash如果页面中有页面内跳转的锚标，则hash属性返回href中#号后面的字符串用location.hash可以获得锚标为#section1（接下来只列出属性值）host提供URL页面所在的Web服务器主机名称和端口号:80hostname提供URL的主机名称部分href提供整个URL:/book/1.html#section1pathname提供文档在主机上的路径及文件名book/1.htmlport返回URL中的端口部分80protocol协议名称HTTPsearch提供完整URL中“?”后面的查询字符串2．Location对象的方法Location对象的方法有reloa

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论