Web技术应用基础第六章

上传人：1*** IP属地：云南上传时间：2025-01-19 格式：PPT 页数：129 大小：1.08MB 积分：20 举报 版权申诉

已阅读5页，还剩124页未读，继续免费阅读

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

文档简介

1第6章JavaScript

第6章JavaScript2

第6章JavaScript学习要点：

理解脚本的基本概念，JavaScript运行机制

熟练掌握将JavaScript语句嵌入HTML文档，和调入外部JS文件方法

应用JavaScript基本语法、控制语句和函数完成JavaScript程序设计

掌握window对象、document对象和JavaScript内置对象的属性和方法的应用

熟练应用JavaScript编制事件处理程序3JavaScript历史JavaScript是由Netscape公司开发的一种脚本语言，其目的是为了扩展基本HTML的功能，用于代替复杂的CGI程序来处理Web页表单信息，提高了响应速度，同时可以为Web页增加动态效果。Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB页开发工具。46.1JavaScript概述6.1.1JavaScript运行机制

脚本:完成某种功能的小程序段.接近高级语言，不具有高级语言复杂、严谨的语法规则。脚本语言功能:能够对页面功能进行管理与控制，具有动态效果，完成计算、表单客户端验证、游戏编写和页面特效制作等工作。客户端脚本:在客户机上运行的脚本程序，客户端产生动态效果。服务器端脚本:在服务器上运行的脚本程序，支持数据库通信，与客户交互，产生动态效果。脚本语言主要有:VBScript和JavaScript

第6章JavaScript5JavaScript运行过程:(1)浏览器地址栏目输入请求页面的URL(页面嵌入了JavaScript程序段)。(2)浏览器将请求发送到服务器。(3)服务器响应请求，将嵌入JavaScript的HTML文档发送到客户端。(4)客户端浏览器从上到下逐行解释执行HTML标记和JavaScript脚本，并把JavaScript脚本交脚本引擎执行，把执行结果向客户展示。

第6章JavaScript66.1.2JavaScript特点1.JavaScript是一种脚本语言2.基于对象（不是基于面向对象语言）3.事件驱动4.动态（HTML是静态页面）5.安全6.与平台无关

第6章JavaScript77JavaScript与Java语言的比较JavaScript与Java之间其它的一些主要区别１、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户端并由客户端解释执行。２、JavaScript是基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。３、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplet则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。8JavaScript与Java语言的比较JavaScript与Java之间其它的一些主要区别４、在HTML文档中，用标识<SCRIPT>标明JavaScript脚本；而Javaapplet则用标识<APPLET>来标明。５、JavaScript采用弱类型；而Java则采用强类型。9JavaScript是一种弱类型语言下面的例子说明了在JavaScript中使用变量的灵活性<html><head><title>JavaScript是弱类型的</title><ScriptLanguage="JavaScript"></SCRIPT></head></html>106.1.3JavaScript应用示例

——图像互换位置

第6章JavaScript

1.任务要求

要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。

例6.111ex6-01.html代码清单<html><head><title>JavaScript应用案例</title><scriptlanguage="JavaScript">functionChangeImage(){vardog_top=dog.style.topvardog_left=dog.style.leftdog.style.top=cat.style.topdog.style.left=cat.style.left

cat.style.top=dog_top

cat.style.left=dog_left}</script></head>

第6章JavaScript事件响应函数，图像互换位置定义脚本嵌入HTML脚本段12<bodyonclick="ChangeImage()"><fontface="隶书"color="blue"size=6>请单击页面</font><p><divid="cat"style="position:absolute;top:60px;left:60px"><imgsrc="cat.gif"width="80"hieght="80"><fontsize=5color="red">cat</font></div><divid="dog"style="position:absolute;top:60px;left:160px"><imgsrc="dog.gif"width="80"hieght="80"><fontsize=5color="red">dog</font></div></body></html>

第6章JavaScriptdiv块的id为dog鼠标单击事件，调用ChangeImage()函数div块的id为cat13

属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。

runat=Server表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。

脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。

第6章JavaScript146.2JavaScript基本语法

JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。作用：与HTML超文本标记语言、Java小程序一起在一个Web页面中链接多个对象，与Web客户交互。

第6章JavaScript156.2.1在HTML文档中调入或嵌入JavaScript1.嵌入JavaScript使用<script>标记把JavaScript语句嵌入HTML文档

语法规则：<scriptlanguage=JavaScript></script>language默认值：JavaScript例6.2

第6章JavaScript16例6.2<html><head><title>JavaScript嵌入HTML</title></head><body><scriptlanguage="JavaScript">document.write("HelloWorld!")

</script></body></html>

第6章JavaScript172.链接外部JavaScript将JavaScript代码以扩展名“.js”单独存放

语法:<scriptsrc="JavaScript文件名"></script>

第6章JavaScript例6.318ex6-03.js清单如下：document.write("HelloWorld!")ex6-03.html清单如下:<html><head><title>链接JS外部文件</title><scriptsrc="ex6-03.js"></script></head><body></body></html>链接JS外部文件

第6章JavaScript19直接添加脚本直接添加脚本直接将代码作为事件响应属性的值。例如：<inputtype="button"value="clickme!"onclick=javascript:alert("hello")>20

6.2.2JavaScript书写格式区分大小写

可以没有可见行结束标志，换行符作为行终止符。也可以用(;)作为一行终止符。

C语言、C＋＋和Java语言中，使用分号(;)作一行的结束标志

如果需要把几行代码写在一行，使用分号(;)分开。

vara=3varb=6varc=0vara=3;b=6;c=0

第6章JavaScript21

为了使程序清晰易读，采用缩进格式来书写。

可以用两种方法进行注释。注释方法与C＋＋相同。

//：从注释标记“//”起直到行尾的字符都被忽略。

/**/：在“/*”与“*/”之间的字符都被忽略。

第6章JavaScript226.2.3基本数据类型1.数据类型

数值型(整数和浮点数)

字符型

布尔型(取值为true或false)

空值

2.常量

值保持不变的量

第6章JavaScript233.变量关键字“var”声明变量并分配存储空间，var为可选项

var

a=3//声明变量，并赋初值

a=3//省略关键字var

vara//声明变量后,赋值

a=6

三种方法等效，但不能既不用关键字“var”也不赋初置。

第6章JavaScript2424JavaScript定义变量

JavaScript的命名规则第一个字符必须为字母、下划线(_)，或者美元符号($)紧接着的字符可以使字母、数字、下划线(_)或者美元符号($)变量名中不能有空格与其它标点符号。变量名不能为保留字。变量名对字母的大小写敏感（变量Orange!=orange）。P_154选择题第一题25JavaScript内部定义的保留字不能用作变量名。JavaScript区分大小写的，变量Num与变量num是两个不同的变量。JavaScript的变量采用了弱类型(Looselytyped)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。在函数体外声明为全局变量JavaScript提供四种类型变量：数值型：36，3.1415926，-3.1E12等字符串型：“Hello!”逻辑型：true，false空值型：null

第6章JavaScript2626转义字符字符说明\b退格符\f换页符\n换行符\r回车符\’单引号\”双引号\t制表符和C语言一样，js也有转义字符，常用的就是：“\n”274.表达式表达式是由变量、常量和运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。

第6章JavaScript285.运算符

.对象访问、[]数组下标、()括号；++增、--减、-取负、~位逻辑非、！逻辑非；delete、new、Typeof、this；*乘、/除、%取模、+加、-减；<<,>>移位、<小于、<=小于等于、>大于、>=大于等于、==等于、!=不等于；&位或、^位异或、|位与、&&与、||逻辑或；=赋值；(Jscript是弱变量型的，可以重复赋值)?:条件运算。优先次序从前到后！

第6章JavaScript29一、一元运算符(1)递增++和递减--JS代码：varbox1=100;++box1;document.write(“box1=”+box1+“<br/>”);varbox2=100;--box2document.write(“box2=”+box2);30前置和后置的区别JS代码：varbox=100;varage=++box;varheight=box++;document.write("age="+age+"<br/>");document.write("height="+height+"<br/>");document.write("box="+box);二、算术运算符

varbox=“100”+100varbox=“100”-10加法运算时，其中一个是字符串，那么结果就会转换为字符串。相当于字符串连接符，不能再算作是加法算术运算符。32二、算术运算符varbox="100"-10;document.write("box="+box+"<br/>");varage=5/4;document.write("age="+age+"<br/>");varheight=("你的年龄是："+(10+10));

document.write(height);如果在算术运算符的值不是数值，那么它会先使用Number()转型函数将其转换为数值(隐式转换)。33二、关系运算符

varbox1=3>2;document.write(box1+"<br/>");//输出truevarbox2="3">22;document.write(box2+"<br/>");//输出falsevarbox3="3">"22";document.write(box3+"<br/>");//输出truevarbox4="a">"B";//a为97，B为66document.write(box4+"<br/>");//输出truevarbox5="Blue"<"alpha";//Blue的第一个字母是B，alpha的第一个字母是a，a为97，B为66document.write(box5)//输出true两个操作数有一个是数值，则将另一个转换为数值，在进行数值比较

34二、位运算符

JavaScript语言中包括了七种位运算符：~(位非)，&(位与)，|(位或)，^(位异或)，<<(左移)，>>(有符右移号)，>>>(无符号右移)

varbox=25&3;

document.write(box);varbox=25|3;

document.write(box);varbox=25^3;

document.write(box);//输出1//输出27//输出26356.3JavaScript控制结构和函数

6.3.1JavaScript控制结构

1.if…elseif(条件){//如果条件为true，进行处理。}else{//如果条件为false，进行处理。}如果不需要处理false情况，可不写else语句段，例如：if(条件){//如果条件为true，进行处理。}

第6章JavaScript362.switch语句switch(表达式){case值1：语句集1breakcase值2：语句集2break…

default:

语句集

break}

第6章JavaScript如果表达式值等于值1，执行语句集1如果表达式值与常量都不匹配，执行default语句集

3737switch语句varx=“c”;vary;Switch(x){case“a”:y=5;case“b”:y=6;default:y=0;}指出代码错误383.forfor循环语句设置了一个计数器计算循环次数，达到循环次数后结束循环。for(初始化表达式；条件；增量表达式){

语句集}

第6章JavaScript394.循环语句whilewhile循环语句不直接指明循环次数，具体循环次数由运行时情况决定，满足循环条件执行循环体语句，不满足循环条件退出循环体。语法规则：while(条件){

语句段}·break语句：根据条件终止循环。·continue语句：根据条件，跳过循环体内剩余语句，进入下一次循环。

第6章JavaScript4040可以用在for或while循环中，使循环中断，跳到for或while循环结束的位置。例:for(i=0;i<20;i++){ if(i>10){ break;}document.write(i+”-”);}

break运行结果：0-1-2-3-4-5-6-7-8-9-10-4141continue用在for或while循环可以跳过循环体中剩余的语句，直接进行下一次循环。例:variNum=0;for(vari=1;i<10;i++){ if(i%5==0){ continue; } iNum++;}alert(iNum);continue运行结果：8426.3.2函数函数必须先定义，后使用。浏览器先执行HTML文档中的<head>模块，JavaScript中常把自定义函数放在<head>模块中，在HTML文档主体<body>中调用函数。函数定义的规则如下：function

函数名(参数列表){

函数体}·function：关键字，使解释程序知道后面定义函数·函数名：可以是任何合法的标识符·参数列表：函数的参数列表，多个参数用逗号分开·函数体：函数执行的运算

第6章JavaScript43JavaScript函数内置函数

eval

函数：用于计算字符串表达式的值

isNaN

函数：用于验证参数是否为NaN（非数字）<SCRIPTLANGUAGE="JavaScript">varstr1=prompt(“输入一个表达式，我给您计算","1+1");varresult=eval(str1);document.write(str1+"="+result);varx=prompt("输入一些数据","0");if(isNaN(x))alert(x+"不是一个数字");else

alert(x+"是一个数字");</SCRIPT>44自定义函数定义函数：function函数名(参数1,参数2，…){

语句;}//通常在文档的HEAD部分定义函数，可以确保先定义后使用;//函数返回值使用“return返回值”;如果使用”return”或没有使用return,则函数返回值为不确定值(undefined)。调用函数：

函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名”

;functionsum(one,two){varresult=one+two;

returnresult;}<INPUTname=“add”type=“button”value=“加法"onClick="sum(2,5)">表示单击此按钮时，调用函数sum()执行45函数的应用num1num2result46定义函数JavaScript代码<HEAD><SCRIPTlanguage="JavaScript">functioncompute(op){varnum1,num2;num1=parseFloat(document.myform.num1.value);num2=parseFloat(document.myform.num2.value);if(op=="+") document.myform.result.value=num1+num2;if(op=="-") document.myform.result.value=num1-num2;if(op=="*") document.myform.result.value=num1*num2;if(op=="/"&&num2!=0) document.myform.result.value=num1/num2;}</SCRIPT></HEAD>定义函数compute()，完成计算的功能。op参数代表运算符号47调用函数<FORMaction=""method="post"name="myform"><P>第一个数<INPUTname="num1"type="text"><BR>第二个数<INPUTname="num2"type="text"></P><P><INPUTname="addButton"type="button"value="＋"onClick="compute('+')"><INPUTname="subButton"type="button"value="－"onClick="compute('-')"><INPUTname="mulButton"type="button"value="×"onClick="compute('*')"><INPUTname="divButton"type="button"value="÷"onClick="compute('/')"></P><P>计算结果<INPUTname="result"type="text"></P></FORM>486.4JavaScript对象6.4.1JavaScript对象概述

对象具有:

属性(properties)

方法(methods)3种对象:

JavaScript内建对象

浏览器环境提供的对象

自定义对象

第6章JavaScript496.4.2自定义对象语法：function对象名称(属性列表){this.属性1=参数1this.属性2=参数2…this.方法1=函数名1this.方法2=函数名2…}

第6章JavaScript50创建对象实例

语法：对象实例名=new对象名称(属性值列表)

第6章JavaScript51functionstudent(id,name,url){this.id=id=namethis.url=urlthis.display=student_display}MyStudent=newstudent("000001","林琳","")定义学生对象学生对象实例

第6章JavaScript对象实例名=new对象名称(属性值列表)52student(id,name,url)

MyStudentid:000001name:林琳url:

YourStudentid:000002name:李四url:定义学生对象对象实例，具体学生

第6章JavaScript536.4.3对象属性和方法的引用

1.对象属性的引用语法：对象实例名.属性成员名例,MyStudent.name=“林琳”

第6章JavaScript54语法：对象实例名[n]例,MyStudent[0]="000001"MyStudent[1]="林琳"MyStudent[2]=或：MyStudent["id"]="000001"MyStudent["name"]="林琳"MyStudent["url"]=

第6章JavaScript552.对象方法的引用

语法：对象实例名.方法名称()例如：MyStudent.display()

第6章JavaScript566.4.4对象的操作1.for…in语句

for…in是操作对象的语句，也称遍历。遍历是指逐一通过一个对象的所有属性，它的计数值是对象中的属性个数。语法：for(变量in

对象){

语句段}

第6章JavaScript572.with语句语法：with(对象实例名){

语句段}例：with(MyStudent){id="000001"name="林琳"url=}

第6章JavaScript586.this关键词用户引用当前所指的对象，格式:

this[属性名]

第6章JavaScript596.4.5事件驱动与事件处理

第6章JavaScript

发生火灾事件调用消防车处理火灾事件日常生活中的事件事件处理程序客户触发键盘事件调用事件处理程序响应键盘事件JavaScript中的事件客户触发键盘事件60JavaScript常用事件事件名称说明onClick鼠标左键单击页面对象时发生。如，鼠标左键单击按钮等onChange对象内容发生改变时发生。如文本框内容改变时onFocus对象获得焦点（鼠标）时发生onBlur对象失去焦点（鼠标）时发生onload网页载入浏览器时发生，发生对象为HTML的<body>标记onUnload用户离开当前页面时发生，发生对象为HTML的<body>标记onMouseOver鼠标移到对象上时发生onMouseOut鼠标离开对象上时发生onMouseMove鼠标在对象上移动时发生onMouseDown鼠标在对象上按下时发生onMouseUp鼠标在对象上释放时发生onSubmit表单提交时发生。如单击“提交”按钮，产生onSubmit事件onResize窗口大小改变时发生

第6章JavaScript616.4.61.对象的定义与创建例6.5例6.5

第6章JavaScript62例6.5<html><head><title>JavaScrip对象应用</title><scriptlanguage="JavaScript">functionstudent(id,name,url){

this.id=id=namethis.url=urlthis.display=student_display}

第6章JavaScript63functionstudent_display(){document.writeln("id="+this["id"]+"<br>")document.writeln("name="+this["name"]+"<br>")document.writeln("url="+this["url"]+"<br>")}MyStudent=newstudent("000001","林琳",“")MyStudent.display()</script></head><body></body></html>

第6章JavaScript64

第6章JavaScript2.用户输入信息验证例6.6界面上有一个输入卡号文本框和一个密码框输入卡号后，验证用户输入卡号的格式是否正确（要求输入以10起头的6位数）如果输入不正确，提示客户重新输入，卡号输入正确后才能输入密码。例6.665

第6章JavaScriptex6-06.html代码清单如下：

<html><head><title>验证信用卡号</title><scriptlanguage="JavaScript">functioninput(){//获得鼠标焦点事件，清空输入卡号文本框，输入卡号

if(document.myForm.card.value=="请输入10开始的6位数字10xxxx")document.myForm.card.value=""}66

第6章JavaScriptfunctionverify(){//响应失去鼠标焦点事件，验证卡号输入格式是否正确

varcardNumber=document.myForm.card.valueif(cardNumber.substr(0,2)!="10"||isNaN(cardNumber)){alert("输入格式错误,请重新输入!")document.myForm.card.focus()}}</script></head>67获得鼠标焦点，调用input()函数失去鼠标焦点，调用verify()函数

<body><formname="myForm"method="post"action="">请输入卡号：<br><inputname="card"type="text"size=28value="请输入10开始的6位数字10xxxx"

onFocus="input()"onBlur="verify()"><p>

请输入密码：<br><inputname="pass"type="password"size=30></body></html>

第6章JavaScript686.5window对象在JavaScript中的应用

6.5.1window对象构成

对象有用户建立的对象，也有系统提供的内建对象。Window对象是内建对象中的最顶层对象。Window对象指的是浏览器窗口对象。

第6章JavaScript69

第6章JavaScriptwindowlocationdocumenthistorylinkbodyanchorformimageselectionappletseventnavigatorbuttoncheckboxtextoptionpasswordselectsubmitradioreset706.5.2window对象定位例如:window→document→form→text。window.document.myForm.card(1)浏览器窗口，顶层Window对象(2)页面文档内容，document对象(3)文档内的表单，名为myForm(4)表单文本框，名为card(4)表单密码框，名为pass

顶层window对象第2层document对象第3层form对象第4层text对象

第6章JavaScript716.5.3window对象的属性

1.window对象主要属性属性名称

说明

范例name当前窗口名字parent当前窗口父窗口

self当前打开窗口

self.status=“你好”top窗口集合中最顶层窗口

status设置当前打开窗口状态栏的显示数据

self.status=“欢迎”defaultStatus当前窗口状态栏的显示数据

self.defaultStatus=“欢迎”

第6章JavaScript726.5.4window对象的方法

1.window对象的主要方法

第6章JavaScript方法名称说明使用范例alert()创建一个带提示信息和“确定”按钮的对话框window.alert("请输入姓名！")confirm()创建带提示信息、“确定”和“取消”按钮对话框window.confirm("链接到google?")close()关闭当前打开的浏览器窗口window.close()open()打开一个新的浏览器窗口window.open(URL,"新窗口名",新窗口设置)prompt()创建一个带提示信息、“确定”、“取消”按钮及输入字符串字段的对话框mpt("请输入姓名!")setTimeout()设置一个时间控制器window.setTimeout("clearTimeOut()",3000)clearTimeout()清除原来时间控制器内的设置window.clearTimeout()732.JavaScript的接口元素

alert(提示)：显示警告框，“提示”是可选项，警告框中输出的内容。

例：alert("对不起，用户名错误。")

第6章JavaScript74

prompt(提示,缺省值)：显示提示框，等待用户输入文本，用户选择“确认”按钮，返回文本框中内容，选择“取消”按钮，返回一个空字符串。“提示”和“缺省值”都是可选项，“缺省值”是文本框默认值例：prompt("请输入姓名：")

第6章JavaScript75

comfirm(提示)：显示确认框，等待用户选择按钮。“提示”可选的，是在提示框中显示的内容，用户可以根据提示选择“确定”或“取消”按钮例：confirm(MyString+“你好！链接到ex07-002.html页面？")

第6章JavaScript766.5.5window对象的事件onLoad：网页载入浏览器时发生onUnLoad：网页从浏览器窗口中删除时发生onBeforeUnLoad：网页被关闭前发生OnResize：用户调整窗口大小时发生OnScroll：用户滚动窗口时发生OnError：载入的网页产生错误时发生

第6章JavaScript776.5.6window对象应用案例1.状态栏内容更新例6.7

第6章JavaScript78<html><head><title>window对象属性的应用</title><scriptlangnge="JavaScript"><!--functionclearStatus(){window.status="学习成功！"}functionwriteStatus(str){

setTimeout("clearStatus()",2000)window.status=str}--></script></head>

第6章JavaScript79<body><form><inputtype="button"name="ControlButton"value="鼠标移过来，看状态栏！“

onMouseOver="writeStatus('欢迎学习Web技术！');returntrue;"></form></body></html>

第6章JavaScript802.打开一个新窗口例6.8

第6章JavaScript81例6.8<html><head><title>window对象的open()方法</title></head><body><fontsize=4><b><p>window对象的open()方法</p><form><inputtype="button"name="ControlButton"value="请把鼠标移过来“

onMouseOver="window.open(':8080','新窗口','width=350,height=200')"></form></b></font></body></html>

第6章JavaScript823.客户端输入信息验证例6.9：在客户端验证用户输入数据。页面上有一个超级链接，当用户点击链接时，由prompt提示框提示用户输入姓名，然后JavaScript程序验证用户输入，如果输入正确弹出确认框confirm，若用户在确认框选择“确认”按钮，则链接到网站；如果输入错误，出现警告框alert，输出"对不起，输入错误。"，程序终止例6.9

第6章JavaScript83<HTML><HEAD><TITLE>JavaScript接口元素应用</TITLE><SCRIPTLANGUAGE="JavaScript"></SCRIPT></HEAD>

第6章JavaScript84<BODY><CENTER><AHREF=“:8080”onClick=MyLink(‘林琳')><H2>你好！欢迎光临tomcat！</H2></A></CENTER></BODY></HTML>

第6章JavaScript856.6document对象在JavaSCript中应用

6.6.1document对象的属性

第6章JavaScript属性名称说明范例alinkColor活动超级链接色document.alinkColor=〞red〞bgColor背景色document.bgColor=〞ff0000〞fgColor前景色document.fgColor=〞ff000f〞linkColor未曾访问过的超级链接的颜色document.linkColor=〞blue〞vlinkColor访问过的超级链接的颜色document.vlinkColor=〞green〞lastModified最后一次修改页面时间date=lastModifiedlocation页面的URL地址url_info=document.locationtitle页面的标题tit_info=document.title866.6.2document对象的方法

第6章JavaScript方法名称说明范例clear()清除文件窗口内数据document.clear()close()关闭文档document.close()open()打开文档document.open()write()向当前文档写入数据document.write(〞你好〞)writeln()向当前文档写入数据，并换行document.write(〞你好〞)getElementById(〞对象id〞)获得指定id对象的元素document.getElementById("advImage").style.pixelTopgetElementsByName(〞对象名〞)获得指定对象名的一组同名对象元素document.getElementsByName("MyCheckbox")87

第6章JavaScript6.6.3document对象的事件表6-13document对象鼠标事件及其使用鼠标事件使用说明鼠标事件使用说明onClick单击鼠标左键时发生onMouseOver鼠标移到对象上时发生ondblClick双击鼠标左键时发生onMouseUp释放鼠标左键时发生onMouseDown按下鼠标左键时发生onSelectStart开始选取对象内容时发生onMouseMove在对象上移动鼠标时发生onDragStart以拖曳方式选取对象时发生onMouseOut鼠标离开对象时发生88表6-14document对象按键事件及其使用

第6章JavaScript按键事件使用说明onKeyDown用户按下按键时发生onKeyPress用户按下按键时发生onKeyDown事件，然后产生onKeyPress事件，如果用户按住按键不放，则产生一系列onKeyPress事件onKeyUp用户释放按键时发生onHelp用户按下系统定义的帮助键时发生896.6.4document对象应用案例例6.8

文本框内容互换任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。

例6.10

第6章JavaScript90<html><head><title>document对象应用</title></head><body>

将文字输入文本框1<form><inputtype=textonChange="document.my.elements[0].value=this.value;"></form>单击文本框2显示文本框1内容<formname="my"><inputtype=textonChange="document.form[0].elements[0].value=this.value;"></form></body></html>

第6章JavaScript例6.10HTMLDOM根据W3C的HTMLDOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点每个HTML元素是元素节点HTML元素内的文本是文本节点每个HTML属性是属性节点注释是注释节点9192父结点（parent）子结点（child）同胞结点（sibling）例：创建新的HTML元素-appendChild()<divid="div1"><pid=“p1”>这是一段文本.</p><pid=“p2”>这是另一段文本.</p></div><script>varpara=document.createElement("p");varnode=document.createTextNode("新的一段文本.");para.appendChild(node);varelement=document.getElementById("div1");element.appendChild(para);</script>93例：改变HTML内容

改变元素内容的最简答的方法是使用innerHTML属性。

下面的例子更改<p>元素的HTML内容：<html><body><pid="p1">HelloWorld!</p><script>document.getElementById("p1").innerHTML="Newtext!";</script></body></html>94956.7JavaScript内置对象

6.7.1String对象1.创建String对象使用格式：①var字符串变量名="字符串"

例如：var

str1=“HelloWorld!”②var字符串变量名=new

String（"字符串"）例如：varstr1==new

String（“HelloWorld!”）2.字符串对象属性

length:返回字符串的长度。

第6章JavaScript96

3.String对象方法

方法名称说明范例big()增加字符串显示字体的大小str1.big()small()减小字符串文本的大小str1.small()italics()以斜体字显示字符串str1.italics()bold()以粗体字显示字符串str1.bold()blink()字符串闪烁显示str1.blink()fixed()以固定字高显示字符串str1.fixed()fontcolor()设置字体显示颜色str1.fontcolor("red")fontsize(size)设置字体大小str1.fontsize(5)strike()显示带删除划线的字符串str1.strike()sub()把文本显示成下标str1.sub()sup()把文本显示成上标str1.sup()

第6章JavaScript97方法名称说明范例toLowerCase()

将字符转换为小写str1.toLowerCase()toUpperCase()将字符转换为大写str1.toUpperCase()indexOf(str,start-position)从start-position位置开始，从左到右查找并返回str子字符串位置，如果找不到返回-1str1.indexOf("he",3)charAt(index)

返回指定位置处的字符，第一个位置为0str1.charAt(3)substring(start,end)返回start与end位置之间的子串str1.substring(4,8)

第6章JavaScript<html><body><pid="p1">Clicktolocatewhere"locate"firstoccurs.</p><pid="p2">0</p><buttononclick="myFunction()">Tryit</button><script>functionmyFunction(){varstr=document.getElementById("p1").innerHTML;varn=str.indexOf("locate");document.getElementById("p2").innerHTML=n+1;}</script></body></html>98阅读代码，分析结果：<html><body><buttononclick="myFunction()">点我</button><pid="demo">PleasevisitMicrosoft!</p><script>functionmyFunction(){varstr=document.getElementById("demo").innerHTML;vartxt=str.replace("Microsoft","W3cSchool");document.getElementById("demo").innerHTML=txt;}</script></body></html>99阅读代码，分析结果：<html><body><pid="demo">Clickthebuttontodisplaythearrayvaluesafterthesplit.</p><buttononclick="myFunction()">Tryit</button><script>functionmyFunction(){varstr="a,b,c,d,e,f";varn=str.split(",");document.getElementById("demo").innerHTML=n[2];}</script></body></html>100阅读代码，分析结果：1016.7.2Math对象

第6章JavaScript属性名称说明范例E常数eMath.E=2.718281…LN1010的自然对数Math.LN10=2.302585…LN22的自然对数Math.LN2=0.693147…LOG2E以2为底E的对数Math.LOG2E=1.442695…LOG10E以10为底E的对数Math.LOG10E=0.434294…PI圆周率Math.PI=3.141592…SQRT1_20.5的平方根Math.SQRT1_2=0.707106…SQRT22的平方根Math.SQRT2=1.414213…102方法名称说明范例sin(x),cos(x)返回x正、余弦值，单位弧度Math.sin(1)=0.841470…asin(x),acos(x)返回x反正、余弦值Math.asin(1)=1.570796…tan(x),atan(x)返回x正切、反正切值，单位弧度Math.tan(1)=1.557407…sqrt(x)返回x平方根Math.sqrt(9)=3pow(bv,ev)以bv为底的ev次方Math.pow(2,3)=8abs(x)返回x绝对值Math.abs(-6)=6random()返回0~1的随机数Math.random()min(x,y)返回x和y中较小的数Math.min(6,8)=6max(x,y)返回x和y中较大的数Math.max(6,8)=8round(x)把x参数舍入到最接近的整数Math.round(2.667)=3ceil(x)返回大于或等于x的最接近整数Math.ceil(3.889)=4floor(x)返回小于或等于x的最接近整数Math.floor(3.889)=3

第6章JavaScript1036.7.3Array对象语法：数组对象实例名=newArray()例如：vararr1=newArray()vararr2=newArray(8)

第6章JavaScript1042.Array对象的属性与方法常用的方法:join()：返回数组中所有元素连接而成的字符串。

reverse()：将数组元素逆转排列。

sort()：对数组中元素进行排序。

第6章JavaScript105JavaScript数组对象特点:(1)JavaScript可以给一个数组的不同元素赋予不类型的值例如：arr1[0]=20//数值型

arr1[1]=〝张三〞//字符串型

arr1[2]=false//布尔型定义二维数组：

vararr=newArray(8)for(i=0;i<8;i++)arr[i]=newArray(5)//创建了一个8×5的二维数组(2)数组的长度可以动态变化例如:arr=newArray(8)//定义长度为8的数组

arr[19]=10//长度增为20

第6章JavaScript1064.7.4.Date对象

Date对象主要用于对系统日期和时间的操作。没有属性，有多种方法。语法形式：

var日期对象实例名=new

Date()

例如，MyDate=new

Date()

建立了一个日期变量MyDate，如果没有特别指定时间，将把系统的机内时间放入MyDate变量。

第6章JavaScript107方法名称说明范例getYear()返回对象实例年份，MyDate.getYear()getMonth()返回对象实例月份，值0～11，0是1月MyDate.getMonth()getDate()返回对象实例日期,值为1～31MyDate.getDate()getDay()返回对象实例星期，值0～6，0星期日MyDate.getDay()getHours()返回小时，其值为0～23MyDate.getHours()getMinutes()返回分钟，其值为0～59MyDate.getMinutes()getSeconds()返回秒数，其值为0～59MyDate.getSeconds()getTime()返回表示时间的整数，从1970年1月1日00：00：00开始，以毫秒为单位MyDate.getTime()setYear(timevalue)设置年份,timevalue为大于1900的整数MyDate.setYear(2008)setMonth(timevalue)设置月份数,值为0～11，0代表1月MyDate.setMonth(7)setDate(timevalue)设置日期,值为1～31MyDate.setDate(20)setDay()设置星期，其值为0～6，0表示星期日MyDate.setDay(5)

第6章JavaScript108方法名称说明范例setHours(timevalue)设置小时数,timevalue的值为0～23MyDate.setHours(12)setMinutes(timevalue)设置分钟数,timevalue的值为0～59MyDate.setMinutes(30)setSeconds(timevalue)设置秒数,timevalue的值为0～59MyDate.setSeconds(30)setTime()设置用长整数表示的时间，从1970年1月1日00：00：00开始，以毫秒为单位进行计算MyDate.setTime(2000)

第6章JavaScript1096.7.5JavaScript内置对象应用案例例6.11

例6.11

第6章JavaScript110<html><head><title>JavaScript内置对象应用案例</title><scriptlanguage="JavaScript"></script></head>

第6章JavaScript111<body><scriptlanguage="JavaScript">varBooks=newArray()Books[0]=newBook("算法与数据结构","严蔚敏陈文博","清华大学出版社")Books[1]=newBook("XML/JSP网页编程教材","吴艾","北京希望电子出版社")Books[2]=newBook("英华大字典","郑易里","商务印书馆")</script><fontcolor="blue"face="隶书"size=5>点击按钮查阅详细信息<formname="BookForm"><inputtype=buttonvalue="算法与数据结构

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

Web技术应用基础第六章

文档简介

温馨提示

最新文档

评论

Web技术应用基础第六章

文档简介

温馨提示

最新文档

评论

相关文档