Web技术应用基础 (2).ppt

1,第6章 JavaScript,JavaScript,2,JavaScript,了解JavaScript作用、工作机制和特点；了解Window对象构成、属性和方法 掌握Window对象基本使用方法学会JavaScript的基本语法规则 熟练掌握JavaScript编程技巧,脚本（Script)应用知识点与技术要求：,Script是一种介于HTML与高级编程语言(如：Java、VB和C+等)之间的特殊语言，是由一组可以在Web服务器或客户端浏览器运行的命令的组合。脚本把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能。,3,6.1 JavaScript概述,6.1.1 JJavaScript运行机制脚本是一种能够完成某些功能的小程序段。这些程序段在程序运行过程中被逐行解释执行，脚本语言可嵌入HTML页面，并被浏览器解释执行。服务器端脚本：在服务器上运行的脚本程序 客户端脚本：在客户机上运行的脚本程序,JavaScript,4,JavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它即可以在客户端运行也可以运行在服务器上。,JavaScript,5,6.1.2 JavaScript特点1.JavaScript是一种脚本语言 2.基于对象 3.事件驱动 4.动态 5.安全 6.与平台无关,JavaScript,6,6.1.3 JavaScript应用示例,图像互换位置,JavaScript,7,1.任务要求 要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。,例6.1,JavaScript,8,ex6-01.html代码清单 JavaScript应用案例function ChangeImage()var dog_top=var dog_left=cat.style.top=cat.style.left cat.style.top=dog_top cat.style.left=dog_left,JavaScript,9,请单击页面 cat dog,JavaScript,10,代码说明(1)第16至19行：和是块容器标记，之间可以容纳多个不同的HTML标记和语言元素。id=cat，指定该块容器的id值是cat。(2)第3至12行：当用户单击页面时，由使用JavaScript脚本语言编写的ChangeImage()函数完成事件的处理，即图像交换位置的动作。,JavaScript,11,标记位于和标记之间，在标记中的脚本段将在页面主体(即在标记中的内容)被浏览器载入之前解释执行。标记位于和标记之间时,这一段脚本程序将在HTML文档被浏览器载入过程中被解释执行属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。runat=Server表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。,JavaScript,12,6.2 JavaScript基本语法 JavaScript是一种跨平台、基于对象(Object)、事件驱动(Event Driven)脚本语言，可以在于浏览器上运行,也可以运行在服务器上。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。,作用：与HTML超文本标记语言、Java小程序 一起在一个Web页面中链接多个对象，与Web客户交互。,JavaScript,13,6.2.1 在HTML文档中调入或嵌入JavaScript1.JavaScript嵌入HTML文件语法规则：language 默认值：JavaScript,JavaScript,例6.2,14,例6.2 JavaScript嵌入HTML document.write(Hello World!),JavaScript,15,2.将JavaScript调入HTML文件将JavaScript代码以扩展名“.js”单独存放 语法:,JavaScript,16,6.2.2 JavaScript书写格式区分大小写 可以没有可见行结束标志，换行符作为行终止符。也可以用(;)作为一行终止符。C语言、C和Java语言中，使用分号(;)作一行的结束标志如果需要把几行代码写在一行，使用分号(;)分开。var a=3 var b=6 var c=0 var a=3;b=6;c=0,JavaScript,17,为了使程序清晰易读，采用缩进格式来书写。可以用两种方法进行注释。注释方法与C相同。/：从注释标记“/”起直到行尾的字符都被忽略。/*/：在“/*”与“*/”之间的字符都被忽略。,JavaScript,18,6.2.3 基本数据类型1.数据类型 数值型(整数和浮点数)字符型 布尔型(取值为true 或false)空值 2.常量 值保持不变的量,JavaScript,19,3.变量关键字“var”声明变量并分配存储空间，var 为可选项 var a=3/声明变量，并赋初值 a=3/省略关键字var var a/声明变量后,赋值 a=6 三种方法等效，但不能既不用关键字“var”也不赋初置。变量名必须以字母或下划线“_”开始，后面的字符可以是字母、数字或下划线例：abc、a_12、myvar、MyVar,JavaScript,20,JavaScript内部定义的保留字不能用作变量名。JavaScript 区分大小写的，变量Num与变量num是两个不同的变量。JavaScript的变量采用了弱类型(Loosely typed)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。在函数体外声明为全局变量JavaScript提供四种类型变量：数值型：36，3.1415926，-3.1E12等字符串型：“Hello!”逻辑型：true，false 空值型：null,JavaScript,21,4.表达式表达式是由变量、常量和运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。,JavaScript,22,5.运算符.对象访问、数组下标、()括号；+增、-减、-取负、位逻辑非、！逻辑非；delete、new、Typeof、this；*乘、/除、%取模、+加、-减；移位、大于、=大于等于、=等于、!=不等于；&位或、位异或、|位与、&与、|逻辑或；=赋值；(Jscript是弱变量型的，可以重复赋值)?:条件运算。优先次序从前到后！,JavaScript,23,6.3 JavaScript控制结构和函数 6.3.1 JavaScript控制结构 1.ifelseif(条件)/如果条件为true，进行处理。else/如果条件为false，进行处理。如果不需要处理false 情况，可不写else语句段，例如：if(条件)/如果条件为true，进行处理。,JavaScript,24,2.switch 语句 switch(表达式)case 值1：语句集1 break case 值2：语句集2 break default:语句集 break,JavaScript,25,3.forfor循环语句设置了一个计数器计算循环次数，达到循环次数后结束循环。for(初始化表达式；条件；增量表达式)语句集,JavaScript,26,4.循环语句 whilewhile循环语句不直接指明循环次数，具体循环次数由运行时情况决定，满足循环条件执行循环体语句，不满足循环条件退出循环体。语法规则：while(条件)语句段break语句：根据条件终止循环。continue语句：根据条件，跳过循环体内剩余语句，进入下一次循环。,JavaScript,27,6.3.2 函数 函数必须先定义，后使用。浏览器先执行HTML文档中的模块，JavaScript中常把自定义函数放在模块中，在HTML文档主体 中调用函数。函数定义的规则如下：function 函数名(参数列表)函数体 function：关键字，使解释程序知道后面定义函数 函数名：可以是任何合法的标识符 参数列表：函数的参数列表，多个参数用逗号分开 函数体：函数执行的运算,JavaScript,28,6.3.3 JavaScript基本语法的应用案例,例6.3,例6.3,JavaScript,29,例6.3JavaScript基本语法应用案例/脚本语言是JavaScriptfunction MyArray(n)/定义函数MyArray this.length=n for(i in 4)thisi=0,JavaScript,30,MyArray=new Array(4)MyArray1=Web MyArray2=技术 MyArray3=应用 MyArray4=基础！document.open()for(var n=1;n,JavaScript,31,6.4 JavaScript对象6.4.1 JavaScript对象概述 对象具有:属性(properties)方法(methods)3种对象:JavaScript内建对象 浏览器环境提供的对象 自定义对象,JavaScript,32,6.4.2 自定义对象 语法：function 对象名称(属性列表)this.属性1=参数1 this.属性2=参数2 this.方法1=函数名1 this.方法2=函数名2,JavaScript,33,创建对象实例 语法：对象实例名=new 对象名称(属性值列表),JavaScript,34,function student(id,name,url)this.id=id this.name=name this.url=url this.display=student_display,JavaScript,MyStudent=new student(000001,林琳,http:/),定义学生对象,学生对象实例,35,6.4.3 对象属性和方法的引用,JavaScript,1.对象属性的引用 语法：对象实例名.属性成员名例,MyStudent.name=林琳。,36,语法：对象实例名n例,MyStudent0=000001MyStudent1=林琳MyStudent2=http:/或：MyStudentid=000001MyStudentname=林琳MyStudenturl=http:/,JavaScript,37,2.对象方法的引用 语法：对象实例名.方法名称()例如：MyStudent.display(),JavaScript,38,6.4.4 对象的操作1.forin语句 forin是操作对象的语句，也称遍历。遍历是指逐一通过一个对象的所有属性，它的计数值是对象中的属性个数。语法：for(变量 in 对象)语句段,JavaScript,39,2.with 语句语法：with(对象实例名)语句段例：with(MyStudent)id=000001 name=林琳 url=http:/,JavaScript,40,6.this关键词用户引用当前所指的对象，格式:this 属性名,JavaScript,41,6.4.5 事件驱动与事件处理onClick:鼠标左键单击对象时发生Onload:网页载入浏览器时发生 onUnload:用户离开当前页面时发生 onMouseOver:鼠标移到对象上时发生onMouseOut:鼠标离开对象上时发生,JavaScript,42,6.4.6 例6.4,JavaScript,例6.4,43,例6.4JavaScrip对象应用 function student(id,name,url)this.id=id this.name=name this.url=url this.display=student_display,JavaScript,44,function student_display()document.writeln(id=+thisid+)document.writeln(name=+thisname+)document.writeln(url=+thisurl+)MyStudent=new student(000001,林琳,“http:/)MyStudent.display(),JavaScript,45,6.5 window对象在JavaScript中的应用 6.5.1 window对象构成对象有用户建立的对象，也有系统提供的内建对象。Window对象是内建对象中的最顶层对象。Window对象指的是浏览器窗口对象。,JavaScript,46,JavaScript,47,6.5.2 window对象的属性 1.window对象主要属性,JavaScript,48,6.5.3 window对象的方法 1.window对象的主要方法alert():创建带“确定”按钮的对话框 confirm():创建带“确定”和“取消“按钮对话框 close():关闭当前打开的浏览器窗口 open():打开一个新浏览器窗口 prompt():创建带“确定”、“取消“按钮及输入字符串字段对话框 setTimeout():设置一个时间控制器 clearTimeout():清除原来时间控制器内时间设置,JavaScript,49,2.JavaScript的接口元素 alert(提示)：显示警告框，“提示”是可选项，警告框中输出的内容。例：alert(对不起，用户名错误。),JavaScript,50,prompt(提示,缺省值)：显示提示框，等待用户输入文本，用户选择“确认”按钮，返回文本框中内容，选择“取消”按钮，返回一个空字符串。“提示”和“缺省值”都是可选项，“缺省值”是文本框默认值 例：prompt(请输入姓名：),JavaScript,51,comfirm(提示)：显示确认框，等待用户选择按钮。“提示”可选的，是在提示框中显示的内容，用户可以根据提示选择“确定”或“取消”按钮 例：confirm(MyString+“你好！链接到 ex07-002.html页面？),JavaScript,52,6.5.4 window对象的事件onLoad：网页载入浏览器时发生onUnLoad：网页从浏览器窗口中删除时发生onBeforeUnLoad：网页被关闭前发生OnResize：用户调整窗口大小时发生OnScroll：用户滚动窗口时发生OnError：载入的网页产生错误时发生,JavaScript,53,6.5.5 window对象应用案例1.状态栏内容更新,JavaScript,例6.5,54,JavaScript,window对象属性的应用,55,JavaScript,56,2.打开一个新窗口,JavaScript,例6.6,57,例6.6 window对象的open()方法window对象的open()方法,JavaScript,58,3.客户端输入信息验证 例6.67：在客户端验证用户输入数据。页面上有一个超级链接，当用户点击链接时，由prompt提示框提示用户输入姓名，然后JavaScript程序验证用户输入，如果输入正确弹出确认框confirm，若用户在确认框选择“确认”按钮，则链接到网站；如果输入错误，出现警告框alert，输出对不起，输入错误。，程序终止,例6.7,JavaScript,59,JavaScript接口元素应用,JavaScript,60,脚本应用,你好！欢迎光临tomcat！,61,6.6 document对象在JavaSCript中应用 6.6.1 document对象 属性alinkColor：活动超级链接的颜色bgColor：页面背景颜色fgColor：页面前景颜色linkColor：页面中未曾访问过的超级链接的颜色vlinkColor：页面中曾经访问过的超级链接的颜色lastModified：最后一次修改页面的时间Location：页面的URL地址Title：页面的标题,JavaScript,62,6.6.2 document对象方法clear():清除文件窗口内的数据close():关闭文档open():打开文档write():向当前文档写入数据,JavaScript,63,document对象鼠标事件:onClick:单击鼠标左键时发生ondblClick:双击鼠标左键时发生onMouseDown:按下鼠标左键时发生onMouseMove:移动鼠标时发生onMouseOut:鼠标离开对象时发生onMouseOver:鼠标移到对象上时发生onMouseUp:放开鼠标左键时发生onSelectStart:开始选取对象内容时发生onDragStart:以拖曳方式选取对象时发生,JavaScript,64,document对象按键事件:onKeyDown:按下按键时发生onKeyPress:按下按键时发生 onKeyDown事件，然后产生onKeyPress事件 onKeyUp:放开按键时发生onHelp:按下系统定义的帮助键时发生,JavaScript,65,6.5.4 window对象应用案例例6.8 文本框内容互换任务要求：页面上有2个文本框，用户在第1个文本框输入内容后，点击第2个文本框，将在第2个文本框内显示第1个文本框的内容。,JavaScript,例6.8,66,6.7 JavaScript内置对象 JavaScript不是纯面向对象语言，不具备面向对象语言特性，如封装、继承和重载.JavaScript没有类功能，不能通过类来创建对象。JavaScript创建对象有属性和方法，对象被创建后，可以象使用函数一样来使用。用户除了自己创建对象外，JavaScript还提供了许多内置对象供用户使用。6.7.1 String对象,JavaScript,67,6.7.2 Math对象6.7.3 Array对象语法：数组对象实例名=new Array()例如：var arr1=new Array()var arr2=new Array(8),JavaScript,68,对象 Date对象主要用于对系统日期和时间的操作。没有属性，有多种方法。语法形式：MyDate=new Date()建立了一个日期变量MyDate，如果没有特别指定时间，将把系统的机内时间放入MyDate变量。表7-13列举了Date对象主要方法和他们的使用说明,JavaScript,69,6.7.5 JavaScript内置对象应用案例例6.9,JavaScript,例 6.9,70,JavaScript内置对象应用案例,JavaScript,71,var Books=new Array()Books0=new Book(算法与数据结构,严蔚敏 陈文博,清华大学出版社)Books1=new Book(XML/JSP网页编程教材,吴艾,北京希望电子出版社)Books2=new Book(英华大字典,郑易里,商务印书馆)点击按钮查阅详细信息 书 名:作 者:出版社:,JavaScript,72,6.8JavaScripy应用案例6.8.1 数字钟 例6.10：制作一个页面，页面上显示“单击此处启动数字钟并统计页面持续时间”。当用户单击文字时，启动数字钟，用以显示当前时刻和网页的持续时间,例6.10,JavaScript,73,例6.10 启动数字钟统计页面持续时间!-function Eclock()var MyDate2=new Date()var MyTime2=MyDate2.getTime()var TimeString2=现在的时间是:+MyDate2.getHours()+时+MyDate2.getMinutes()+分+MyDate2.getSeconds()+秒 var MyHours3=0;MyMinutes3=0 var MySeconds4=Math.round(MyTime2-MyTime1)/1000)MyHours3=Math.round(MySeconds4-1800)/3600)MyMinutes3=Math.round(MySeconds4-30)%3600)/60),JavaScript,74,if(MyMinutes3=60)MyMinutes3=0 MySeconds4=Math.round(MySeconds4%3600)MySeconds3=Math.round(MySeconds4%60)var TimeString3=持续时间是:+MyHours3+时+MyMinutes3+分+MySeconds3+秒 Clock.innerHTML=TimeString2+TimeString3 setTimeout(Eclock(),1000)-,JavaScript,75,JavaScript,76,单击此处启动数字钟并统计网页持续时间,JavaScript,77,6.8.2 状态栏文字滚动显示例6.11,JavaScript,例6.11,78,例6.11状态栏文字滚动显示!-var ScrText=欢迎学习“Web技术应用基础”!var LenText=ScrText.length var Width=80 var Pos=1-Width function Scroll()Pos+var Scroller=if(Pos=LenText)Pos=1-Width,JavaScript,79,if(Pos单击页面注意状态栏的变化,JavaScript,80,6.8.2 随机改变页面背景色例6.12,例6.12,JavaScript,81,例6.12背景色随机改变 var mybool=false color_bar=new Array(3)for(var i=0;i255)mybool=false continue color_bari=start_num mybool=true mybool=false,JavaScript,82,var a=color_bar0.toString(16)if(a.length背景色是：+mkcolor+),JavaScript,83,6.8.4 鼠标跟随例6.13,JavaScript,例6.13,84,例6.13鼠标跟随!-var x,y var CanBool=0 function canMove()x=document.body.scrollLeft+event.clientX y=document.body.scrollTop+event.clientY CanBool=1,JavaScript,85,function move()if(CanBool)=x+20=y setTimeout(move(),100)-,JavaScript,86,鼠标移动图像跟随效果,JavaScript,87,作业与实验,JavaScript,完,