Web技术应用基础-d06

上传人：王*** IP属地：广西上传时间：2024-03-27 格式：PPT 页数：87 大小：1.36MB 积分：15 举报 版权申诉

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

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

文档简介

第6章JavaScriptJavaScript1JavaScript了解JavaScript作用、工作机制和特点；了解Window对象构成、属性和方法掌握Window对象根本使用方法学会JavaScript的根本语法规那么熟练掌握JavaScript编程技巧脚本〔Script)应用知识点与技术要求：Script是一种介于HTML与高级编程语言(如：Java、VB和C++等)之间的特殊语言，是由一组可以在Web效劳器或客户端浏览器运行的命令的组合。脚本把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能。26.1JavaScript概述6.1.1JJavaScript运行机制

脚本是一种能够完成某些功能的小程序段。这些程序段在程序运行过程中被逐行解释执行，脚本语言可嵌入HTML页面，并被浏览器解释执行。效劳器端脚本：在效劳器上运行的脚本程序客户端脚本：在客户机上运行的脚本程序JavaScript3JavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它即可以在客户端运行也可以运行在效劳器上。JavaScript46.1.2JavaScript特点1.JavaScript是一种脚本语言2.基于对象3.事件驱动4.动态5.平安6.与平台无关JavaScript5

6.1.3JavaScript应用例如——图像互换位置

JavaScript6

1.任务要求

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

例6.1JavaScript7ex6-01.html代码清单<html><head><title>JavaScript应用案例</title><scriptlanguage="JavaScript">functionChangeImage(){vardog_top=vardog_left==cat.style.top=cat.style.left

cat.style.top=dog_top

cat.style.left=dog_left}</script></head>JavaScript8<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"><br><fontsize=5color="red">cat</font></div><divid="dog"style="position:absolute;top:60px;left:160px"><imgsrc="dog.gif"width="80"hieght="80"><br><fontsize=5color="red">dog</font></div></body></html>JavaScript9代码说明(1)第16至19行：<div>和</div>是块容器标记，之间可以容纳多个不同的HTML标记和语言元素。id="cat"，指定该块容器的id值是cat。(2)第3至12行：当用户单击页面时，由使用JavaScript脚本语言编写的ChangeImage()函数完成事件的处理，即图像交换位置的动作。JavaScript10<script>标记位于<head>和</head>标记之间，在<script>标记中的脚本段将在页面主体(即在<body>标记中的内容)被浏览器载入之前解释执行。<script>标记位于<body>和</body>标记之间时,这一段脚本程序将在HTML文档被浏览器载入过程中被解释执行｡属性language是script标记的必须指定的根本属性。一般被指定为JavaScript或VBScript。runat=Server表示该段脚本在效劳器端执行，如果省略，那么表示该段脚本将发送到客户端运行。脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。JavaScript116.2JavaScript根本语法JavaScript是一种跨平台、基于对象(Object)、事件驱动(EventDriven)脚本语言，可以在于浏览器上运行,也可以运行在效劳器上。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript效劳器端扩展三局部组成。核心语言局部包括JavaScript的根本语法和JavaScript的内置对象，在客户端和效劳器端均可运行。作用：与HTML超文本标记语言、Java小程序一起在一个Web页面中链接多个对象，与Web客户交互。JavaScript126.2.1在HTML文档中调入或嵌入JavaScript1.JavaScript嵌入HTML文件语法规那么：<scriptlanguage=JavaScript>language默认值：JavaScriptJavaScript例6.213例6.2<html><head><title>JavaScript嵌入HTML</title></head><body><scriptlanguage="JavaScript">document.write("HelloWorld!")</script></body></html>JavaScript142.将JavaScript调入HTML文件将JavaScript代码以扩展名“.js”单独存放

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

6.2.2JavaScript书写格式区分大小写

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

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

如果需要把几行代码写在一行，使用分号(;)分开。vara=3varb=6varc=0vara=3;b=6;c=0JavaScript16

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

可以用两种方法进行注释。注释方法与C＋＋相同。//：从注释标记“//”起直到行尾的字符都被忽略。/**/：在“/*”与“*/”之间的字符都被忽略。JavaScript176.2.3根本数据类型1.数据类型数值型(整数和浮点数)字符型布尔型(取值为true或false)空值

2.常量值保持不变的量JavaScript183.变量关键字“var”声明变量并分配存储空间，var为可选项

var

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

a=3//省略关键字var

vara//声明变量后,赋值a=6

三种方法等效，但不能既不用关键字“var”也不赋初置。变量名必须以字母或下划线“_”开始，后面的字符可以是字母、数字或下划线例：abc、a_12、myvar、MyVarJavaScript19JavaScript内部定义的保存字不能用作变量名。JavaScript区分大小写的，变量Num与变量num是两个不同的变量。JavaScript的变量采用了弱类型(Looselytyped)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。在函数体外声明为全局变量JavaScript提供四种类型变量：数值型：36，3.1415926，-3.1E12等字符串型：“Hello!”逻辑型：true，false空值型：nullJavaScript204.表达式表达式是由变量、常量和运算符按一定规那么组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。JavaScript215.运算符

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

1.if…elseif(条件){//如果条件为true，进行处理。}else{//如果条件为false，进行处理。}如果不需要处理false情况，可不写else语句段，例如：if(条件){//如果条件为true，进行处理。}JavaScript232.switch语句switch(表达式){case值1：语句集1breakcase值2：语句集2break…default:语句集break}JavaScript243.forfor循环语句设置了一个计数器计算循环次数，到达循环次数后结束循环。for(初始化表达式；条件；增量表达式){语句集}JavaScript254.循环语句whilewhile循环语句不直接指明循环次数，具体循环次数由运行时情况决定，满足循环条件执行循环体语句，不满足循环条件退出循环体。语法规那么：while(条件){语句段}·break语句：根据条件终止循环。·continue语句：根据条件，跳过循环体内剩余语句，进入下一次循环。JavaScript266.3.2函数函数必须先定义，后使用。浏览器先执行HTML文档中的<head>模块，JavaScript中常把自定义函数放在<head>模块中，在HTML文档主体<body>中调用函数。函数定义的规那么如下：function函数名(参数列表){函数体}·function：关键字，使解释程序知道后面定义函数·函数名：可以是任何合法的标识符·参数列表：函数的参数列表，多个参数用逗号分开·函数体：函数执行的运算JavaScript276.3.3JavaScript根本语法的应用案例例6.3

例6.3JavaScript28例6.3<html><head><title>JavaScript根本语法应用案例</title><scriptlanguage="JavaScript">//脚本语言是JavaScriptfunctionMyArray(n){//定义函数MyArraythis.length=nfor(iin4)this[i]=0}JavaScript29MyArray=newArray(4)MyArray[1]="Web"MyArray[2]="技术"MyArray[3]="应用"MyArray[4]="根底！"document.open()for(varn=1;n<MyArray.length;n++){document.write(MyArray[n]);}document.close()</script></head><body></body></html>JavaScript306.4JavaScript对象6.4.1JavaScript对象概述

对象具有:

属性(properties)

方法(methods)3种对象:

JavaScript内建对象

浏览器环境提供的对象

自定义对象JavaScript316.4.2自定义对象语法：function对象名称(属性列表){this.属性1=参数1this.属性2=参数2…this.方法1=函数名1this.方法2=函数名2…}JavaScript32创立对象实例

语法：对象实例名=new对象名称(属性值列表)JavaScript33functionstudent(id,name,url){this.id=id=namethis.url=urlthis.display=student_display}JavaScriptMyStudent=newstudent("000001","林琳","://")定义学生对象学生对象实例346.4.3对象属性和方法的引用

JavaScript1.对象属性的引用语法：对象实例名.属性成员名例,MyS="林琳"。

35语法：对象实例名[n]例,MyStudent[0]="000001"MyStudent[1]="林琳"MyStudent[2]=://或：MyStudent["id"]="000001"MyStudent["name"]="林琳"MyStudent["url"]=://JavaScript362.对象方法的引用

语法：对象实例名.方法名称()例如：MyStudent.display()JavaScript376.4.4对象的操作1.for…in语句for…in是操作对象的语句，也称遍历。遍历是指逐一通过一个对象的所有属性，它的计数值是对象中的属性个数。语法：for(变量in对象){语句段}JavaScript382.with语句语法：with(对象实例名){语句段}例：with(MyStudent){id="000001"name="林琳"url=://}JavaScript396.this关键词用户引用当前所指的对象，格式:

this[属性名]JavaScript406.4.5事件驱动与事件处理onClick:鼠标左键单击对象时发生Onload:网页载入浏览器时发生onUnload:用户离开当前页面时发生onMouseOver:鼠标移到对象上时发生onMouseOut:鼠标离开对象上时发生JavaScript416.4.6例6.4JavaScript例6.442例6.4<html><head><title>JavaScrip对象应用</title><scriptlanguage="JavaScript">functionstudent(id,name,url){

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

JavaScript43functionstudent_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>JavaScript446.5window对象在JavaScript中的应用

6.5.1window对象构成

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

1.window对象主要属性属性名称说明范例name当前窗口名字parent当前窗口父窗口

self当前打开窗口

self.status=“你好”

top窗口集合中最顶层窗口

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

self.status=“欢迎”

defaultStatus当前窗口状态栏的显示数据

self.defaultStatus=“欢迎”

JavaScript476.5.3window对象的方法

1.window对象的主要方法alert():创立带“确定”按钮的对话框confirm():创立带“确定”和“取消“按钮对话框close():关闭当前翻开的浏览器窗口open():翻开一个新浏览器窗口prompt():创立带“确定”、“取消“按钮及输入字符串字段对话框setTimeout():设置一个时间控制器clearTimeout():去除原来时间控制器内时间设置JavaScript482.JavaScript的接口元素

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

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

JavaScript49

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

JavaScript50

comfirm(提示)：显示确认框，等待用户选择按钮。“提示”可选的，是在提示框中显示的内容，用户可以根据提示选择“确定”或“取消”按钮例：confirm(MyString+“你好！链接到ex07-002.html页面？")JavaScript516.5.4window对象的事件onLoad：网页载入浏览器时发生onUnLoad：网页从浏览器窗口中删除时发生onBeforeUnLoad：网页被关闭前发生OnResize：用户调整窗口大小时发生OnScroll：用户滚动窗口时发生OnError：载入的网页产生错误时发生JavaScript526.5.5window对象应用案例1.状态栏内容更新JavaScript例6.553JavaScript<html><head><title>window对象属性的应用</title><scriptlangnge="JavaScript"><!--functionclearStatus(){window.status="学习成功！"}functionwriteStatus(str){

setTimeout("clearStatus()",2000)window.status=str}--></script></head>54<body><form><inputtype="button"name="ControlButton"value="鼠标移过来，看状态栏！“onMouseOver="writeStatus('欢送学习Web技术！');returntrue;"></form></body></html>JavaScript552.翻开一个新窗口JavaScript例6.656例6.6<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>JavaScript573.客户端输入信息验证例6.67：在客户端验证用户输入数据。页面上有一个超级链接，当用户点击链接时，由prompt提示框提示用户输入姓名，然后JavaScript程序验证用户输入，如果输入正确弹出确认框confirm，假设用户在确认框选择“确认”按钮，那么链接到网站；如果输入错误，出现警告框alert，输出"对不起，输入错误。"，程序终止例6.7JavaScript58<HTML><HEAD><TITLE>JavaScript接口元素应用</TITLE><SCRIPTLANGUAGE="JavaScript"></SCRIPT></HEAD>JavaScript59脚本应用<BODY><CENTER><AHREF=“://:8080”onClick=MyLink(‘林琳')><H2>你好！欢送光临tomcat！</H2></A></CENTER></BODY></HTML>606.6document对象在JavaSCript中应用

6.6.1document对象属性alinkColor：活动超级链接的颜色bgColor：页面背景颜色fgColor：页面前景颜色linkColor：页面中未曾访问过的超级链接的颜色vlinkColor：页面中曾经访问过的超级链接的颜色lastModified：最后一次修改页面的时间Location：页面的URL地址Title：页面的标题JavaScript616.6.2document对象方法clear():去除文件窗口内的数据close():关闭文档open():翻开文档write():向当前文档写入数据JavaScript62document对象鼠标事件:onClick:单击鼠标左键时发生ondblClick:双击鼠标左键时发生onMouseDown:按下鼠标左键时发生onMouseMove:移动鼠标时发生onMouseOut:鼠标离开对象时发生onMouseOver:鼠标移到对象上时发生onMouseUp:放开鼠标左键时发生onSelectStart:开始选取对象内容时发生onDragStart:以拖曳方式选取对象时发生JavaScript63document对象按键事件:onKeyDown:按下按键时发生onKeyPress:按下按键时发生onKeyDown事件，然后产生onKeyPress事件onKeyUp:放开按键时发生onHelp:按下系统定义的帮助键时发生JavaScript646.5.4window对象应用案例例6.8文本框内容互换任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。

JavaScript

例6.8656.7JavaScript内置对象

JavaScript不是纯面向对象语言，不具备面向对象语言特性，如封装、继承和重载.JavaScript没有类功能，不能通过类来创立对象。JavaScript创立对象有属性和方法，对象被创立后，可以象使用函数一样来使用。用户除了自己创立对象外，JavaScript还提供了许多内置对象供用户使用。6.7.1String对象

JavaScript666.7.2Math对象6.7.3Array对象语法：数组对象实例名=newArray()例如：vararr1=newArray()vararr2=newArray(8)JavaScript67对象

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

Date()建立了一个日期变量MyDate，如果没有特别指定时间，将把系统的机内时间放入MyDate变量。表7-13列举了Date对象主要方法和他们的使用说明JavaScript686.7.5JavaScript内置对象应用案例例6.9JavaScript

例6.969<html><head><title>JavaScript内置对象应用案例</title><scriptlanguage="JavaScript"></script></head>JavaScript70<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="算法与数据结构"onClick="Books[0].UpInfo('算法与数据结构')"><p><inputtype=buttonvalue=“XML/JSP网页编程教材"

onClick="Books[1].UpInfo('XML/JSP网页编程教材')"><p><inputtype=buttonvalue="英华大字典“onClick="Books[2].UpInfo('英华大字典')"><p>书名:<inputtype="text"name="BookTitle"><p>作者:<inputtype="text"name="BookAuth"><p>出版社:<inputtype="text"name="BookPublisher"><p></font></form>JavaScript716.8JavaScripy应用案例6.8.1数字钟

例6.10：制作一个页面，页面上显示“单击此处启动数字钟并统计页面持续时间”。当用户单击文字时，启动数字钟，用以显示当前时刻和网页的持续时间

例6.10JavaScript72例6.10<html><head><title>启动数字钟统计页面持续时间</title><scriptlanguage="JavaScript"><!--functionEclock(){varMyDate2=newDate()varMyTime2=MyDate2.getTime()varTimeString2=‘现在的时间是:'+MyDate2.getHours()+'时'+MyDate2.getMinutes()+‘分’+MyDate2.getSeconds()+'秒'varMyHours3=0;MyMinutes3=0varMySeconds4=Math.round((MyTime2-MyTime1)/1000)MyHours3=Math.round((MySeconds4-1800)/3600)MyMinutes3=Math.round(((MySeconds4-30)%3600)/60)

JavaScript73if(MyMinutes3==60)MyMinutes3=0MySeconds4=Math.round(MySeconds4%3600)MySeconds3=Math.round(MySeconds4%60)varTimeString3='持续时间是:'+MyHours3+'时'+MyMinutes3+'分'+MySeconds3+'秒'Clock.innerHTML=TimeString2+'<P>'+TimeString3setTimeout("Eclock()",1000)}--></script></head>JavaScript74<body><h2><fontcolor="green"face="楷体"><scriptlanguage="JavaScript"></script></font></h2>JavaScript75<divid=Clockstyle="position:absoulte;left:150;top:150;font-family:'楷体';font-size:30;color:#0000FF"OnClick="Eclock()">单击此处启动数字钟并统计网页持续时间</div></body></html>

JavaScript766.8.2状态栏文字滚动显示例6.11JavaScript

例6.1177

例6.11<html><head><title>状态栏文字滚动显示</title><scriptlanguage="JavaScript"><!--varScrText="欢送学习“Web技术应用根底”!"varLenText=ScrText.lengthvarWidth=80varPos=1-WidthfunctionScroll(){Pos++varScroller=""if(Pos==LenText){Pos=1-Width}

JavaScript78if(Pos<0){for(vari=1;i<=Math.abs(Pos);i++)Scroller=Scroller+""Scroller=Scroller+ScrText.substring(0,Width-i+1)}elseScroller=Scroller+ScrText.substring(Pos,Width+Pos)window.status=ScrollersetTimeout("Scroll()",16)}--></script></head><bodyonClick="Scroll()"><divid=StaScrollerstyle="position:ab

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

温馨提示

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

Web技术应用基础-d06

文档简介

温馨提示

最新文档

评论

Web技术应用基础-d06

文档简介

温馨提示

最新文档

评论

相关文档